如何将 DOM 元素脚本添加到 head 部分?
Posted
技术标签:
【中文标题】如何将 DOM 元素脚本添加到 head 部分?【英文标题】:How to add DOM element script to head section? 【发布时间】:2013-09-18 01:25:00 【问题描述】:我想将 DOM 元素添加到 html 的 head 部分。 jQuery 不允许将 DOM 元素脚本添加到 head 部分,而是执行 Reference。
我想添加script
标签并在<head>
部分中编写脚本。
var script = '<script type="text/javascript"> //function </script>'
$('head').append(script);
类似这样的函数。我试过 jQuery 和 javascript\,但它不起作用。
请告诉我如何通过 jQuery 或 javascript 添加和写入script
。
我厌倦了添加 DOM 元素的 javascript,但它不适用于 .innerHTML()
写入头部。我正在使用 jQuery 2.0.3 和 jQuery UI 1.10.3。
我想将 base64 编码脚本添加到 head 部分。我使用像this这样的base64解码器js来解码javascript,然后放在头部。
//已编辑 会是
$.getScript('base64.js');
var encoded = "YWxlcnQoImhpIik7DQo="; //More text
var decoded = decodeString(encoded);
var script = '<script type="text/javascript">' +decoded + '</script>';
$('head').append(script);
将编码脚本和添加内容放入一个 javascript 文件中。
我想使用base64.js
或其他一些用于浏览器的解码器javascript 文件不接受atob()
。
【问题讨论】:
你试过$.getScript()
吗?
我想在文档头部添加<script>//function<\script>
。
动态添加 DOM 元素会导致不稳定,因为它们依赖于浏览器,即使使用 .readyState()
来检查状态。也许EventListner
会解决,但是由于动态加载趋势,以下所有内容都不好,reference。
【参考方案1】:
试试这个
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'url';
document.head.appendChild(script);
【讨论】:
我想添加一个脚本而不是脚本文件。document.head
优于 document.getElementsByTagName('head')[0]
。
这很简单,但很吸引人。【参考方案2】:
如果像这样在头部注入多个脚本标签并混合本地和远程脚本文件,则可能会出现依赖外部脚本的本地脚本(例如从 googleapis 加载 jQuery)会出现错误的情况,因为外部脚本在本地加载之前可能不会加载。
所以这样的事情会有问题:(jquery.some-plugin.js 中的“jQuery is not defined”)。
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
head.appendChild(script);
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "/jquery.some-plugin.js";
head.appendChild(script);
当然,这种情况是 .onload() 的用途,但是如果要加载多个脚本,那就很麻烦了。
作为对这种情况的解决方案,我将这个函数放在一起,它将保留要加载的脚本队列,在前一个完成后加载每个后续项目,并返回一个 Promise,当脚本(或最后一个脚本在如果没有参数,则队列)已完成加载。
load_script = function(src)
// Initialize scripts queue
if( load_script.scripts === undefined )
load_script.scripts = [];
load_script.index = -1;
load_script.loading = false;
load_script.next = function()
if( load_script.loading ) return;
// Load the next queue item
load_script.loading = true;
var item = load_script.scripts[++load_script.index];
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = item.src;
// When complete, start next item in queue and resolve this item's promise
script.onload = () =>
load_script.loading = false;
if( load_script.index < load_script.scripts.length - 1 ) load_script.next();
item.resolve();
;
head.appendChild(script);
;
;
// Adding a script to the queue
if( src )
// Check if already added
for(var i=0; i < load_script.scripts.length; i++)
if( load_script.scripts[i].src == src ) return load_script.scripts[i].promise;
// Add to the queue
var item = src: src ;
item.promise = new Promise(resolve => item.resolve = resolve;);
load_script.scripts.push(item);
load_script.next();
// Return the promise of the last queue item
return load_script.scripts[ load_script.scripts.length - 1 ].promise;
;
通过添加脚本以确保在开始下一步之前完成前面的操作,可以像...
["https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
"/jquery.some-plugin.js",
"/dependant-on-plugin.js",
].forEach(load_script);
或者加载脚本并在完成后使用 return Promise 来完成工作......
load_script("some-script.js")
.then(function()
/* some-script.js is done loading */
);
【讨论】:
这是一个很好的整体问题的完整解决方案,非常感谢您的分享。我将它用作轻量级库的一部分,以在 notepad++ 中执行 javascript 代码。 超级解决方案,我认为应该被接受。 使用 vanilla JS 的绝佳解决方案,不仅节省时间,而且比编写和解析多余的 HTML 脚本标签更干净。 是一篇关于加载脚本的好文章html5rocks.com/en/tutorials/speed/script-loading【参考方案3】:试试看::
var script = document.createElement("script");
script.type="text/javascript";
script.innerHTML="alert('Hi!');";
document.getElementsByTagName('head')[0].appendChild(script);
【讨论】:
【参考方案4】:按照作者的说法,他们想在头部创建一个脚本,而不是指向脚本文件的链接。此外,为了避免 jQuery 的复杂性(在这种情况下它几乎没有提供什么有用的功能),vanilla javascript 可能是更好的选择。
这可能是这样做的:
var script = document.createTextNode("<script>alert('Hi!');</script>");
document.getElementsByTagName('head')[0].appendChild(script);
对那些可能对为什么会起作用感到困惑的人进行一些澄清: 网页中的所有代码都是文本。文本是网页中最基本的类型。浏览器简单地开始处理文本,遵循它的规则,直到它到达末尾(这包括环回、递归等)
为此,制作这个标签的脚本必须也在标题中。浏览器在处理时会在到达标头末尾之前点击此代码,将您想要的脚本附加到标头上,然后在继续处理时到达它。如果您有可靠的结束页脚,您可以将 'head' 更改为 'footer' 或类似的,但考虑到具有脚本的站点中最可靠的是 header 标签的存在,这使得它在这种情况下成为最有用的选项.
【讨论】:
创建TextNode?!这只会将您的文本添加到头部,而不会创建脚本标签。 脚本是文本。请注意我的示例中的开头“”。 这个只是在标题中添加文本,而不是脚本标签 @LongNguyen 我只能假设当你测试它时,你用你想要的任何东西替换了"<script>alert('Hi!');</script>"
。不要那样做。仅将 alert('Hi!');
替换为您想要的脚本,或者您在正文中运行脚本。问题是,整个网站“仅仅是”文本。脚本标签是文本。如果这在浏览器完成对标头的处理之前运行,则警报将触发。如果您只是想要一个脚本在那里稍后调用,它会起作用。
@lilHar 不,我保留了你写的所有内容,没有替换任何内容。【参考方案5】:
我找到的最佳解决方案:
AppendToHead('script', 'alert("hii"); ');
//or
AppendToHead('script', 'http://example.com/script.js');
//or
AppendToHead('style', '#myDivcolor:red; ');
//or
AppendToHead('style', 'http://example.com/style.css');
function AppendToHead(elemntType, content)
// detect whether provided content is "link" (instead of inline codes)
var Is_Link = content.split(/\r\n|\r|\n/).length <= 1 && content.indexOf("//") > -1 && content.indexOf(" ") <= -1;
if (Is_Link)
if (elemntType == 'script')
var x = document.createElement('script');
x.id = id;
x.src = content;
x.type = 'text/javascript';
else if (elemntType == 'style')
var x = document.createElement('link');
x.id = id;
x.href = content;
x.type = 'text/css';
x.rel = 'stylesheet';
else
var x = document.createElement(elemntType);
if (elemntType == 'script')
x.type = 'text/javascript';
x.innerHTML = content;
else if (elemntType == 'style')
x.type = 'text/css';
if (x.styleSheet)
x.styleSheet.cssText = content;
else
x.appendChild(document.createTextNode(content));
//append in head
(document.head || document.getElementsByTagName('head')[0]).appendChild(x);
【讨论】:
【参考方案6】:var script = $('<script type="text/javascript">// function </script>')
document.getElementsByTagName("head")[0].appendChild(script[0])
但在这种情况下,脚本将不会被执行,并且函数将无法在全局命名空间中访问。
要在<script>
中使用代码,您需要按照您的问题进行操作
$('head').append(script);
【讨论】:
这个答案意外地帮助了我。第三方脚本通过实际查找 【参考方案7】:这是一个老问题,我知道它专门询问如何在头部添加一个脚本标签,但是根据 OP 的解释,他们实际上只是打算执行一些通过其他 JS 函数获得的 JS 代码。
这比在页面中添加脚本标签要简单得多。
简单地说:
eval(decoded);
eval 会内联执行一串 JS,根本不需要添加到 DOM 中。
我认为没有必要在页面加载后向 DOM 添加内嵌脚本标签。
更多信息在这里:http://www.w3schools.com/jsref/jsref_eval.asp
【讨论】:
【参考方案8】:你可以这样做:
var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript";
scriptTag.src = "script_source_here";
(document.getElementsByTagName("head")[0] || document.documentElement ).appendChild(scriptTag);
【讨论】:
我想在头部添加<script> // functions </script>
以使用 base64 编码脚本,并在添加详细信息时将它们放在一个文件中。【参考方案9】:
我使用 php 作为我的服务器端语言,所以我将用它编写示例 - 但我确信您的服务器端也有一个方法。
只需让您的服务器端语言从变量中添加它。 w/ php 类似的东西会如下所示。
请注意,这仅在脚本与页面加载一起加载时才有效。 如果你想动态加载它,这个解决方案对你没有帮助。
PHP
HTML
<head>
<script type="text/javascript"> <?php echo $decodedstring ?> </script>
</head>
总结:使用服务器端解码并使用服务器语言将其放入您的 HTML 中。
【讨论】:
【参考方案10】:这是一个安全且可重用的函数,用于将脚本添加到 head 部分(如果它不存在)。
在此处查看工作示例:Example
<!DOCTYPE html>
<html>
<head>
<base href="/"/>
<style>
</style>
</head>
<body>
<input type="button" id="" style='width:250px;height:50px;font-size:1.5em;' value="Add Script" onClick="addScript('myscript')"/>
<script>
function addScript(filename)
// house-keeping: if script is allready exist do nothing
if(document.getElementsByTagName('head')[0].innerHTML.toString().includes(filename + ".js"))
alert("script is allready exist in head tag!")
else
// add the script
loadScript('/',filename + ".js");
function loadScript(baseurl,filename)
var node = document.createElement('script');
node.src = baseurl + filename;
document.getElementsByTagName('head')[0].appendChild(node);
alert("script added");
</script>
</body>
</html>
【讨论】:
【参考方案11】:<script type="text/JavaScript">
var script = document.createElement('SCRIPT');
script.src = 'YOURJAVASCRIPTURL';
document.getElementsByTagName('HEAD')[0].appendChild(script);
</script>
【讨论】:
【参考方案12】:如果你想添加一个脚本标签,里面有一些脚本,使用
var script= document.createElement('script');
script.text = "alert('Hi!');";
document.head.appendChild(script);
【讨论】:
以上是关于如何将 DOM 元素脚本添加到 head 部分?的主要内容,如果未能解决你的问题,请参考以下文章