jQuery 如何将 DOM 元素脚本添加到 head 部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18784920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add DOM element script to head section?
提问by john3825
I want to add DOM element to head section of HTML. jQuery does not allow adding DOM element script to the head section and they execute instead, Reference.
我想将 DOM 元素添加到 HTML 的 head 部分。jQuery 不允许将 DOM 元素脚本添加到 head 部分，而是执行Reference。
I want to add scripttags and write a script within <head>section.
我想script在<head>部分中添加标签并编写脚本。
var script = '<script type="text/javascript"> //function </script>'
$('head').append(script);
Something like this with functions. I tried jQuery and javascript\, but it does not work.
像这样的功能。我试过 jQuery 和 javascript\，但它不起作用。
Please tell me how to add and write scriptto head by jQuery or javascript.
请告诉我如何script通过 jQuery 或 javascript添加和写入头部。
I tired the javascript to add DOM element, but it does not work with .innerHTML()to write to head. I am using jQuery 2.0.3 and jQuery UI 1.10.3.
我厌倦了 javascript 来添加 DOM 元素，但它不能.innerHTML()用于写入头。我使用 jQuery 2.0.3 和 jQuery UI 1.10.3。
I want to add base64 encoded script to head section. I use base64 decoder js like thisto decode the javascript and then put on the head section.
我想将 base64 编码的脚本添加到 head 部分。我像这样使用base64解码器js来解码javascript，然后放在head部分。
//Edited
It will be
//编辑
后将是
$.getScript('base64.js');
var encoded = "YWxlcnQoImhpIik7DQo="; //More text
var decoded = decodeString(encoded);
var script = '<script type="text/javascript">' +decoded + '</script>';
$('head').append(script);
To fit an encoded script and the addition in one javascript file.
I want to use base64.jsor some other decoder javascript files for browsers does not accept atob().
将编码脚本和添加到一个 javascript 文件中。我想使用base64.js或其他一些用于浏览器的解码器 javascript 文件不接受atob().
回答by pbaris
try this
尝试这个
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'url';
document.getElementsByTagName('head')[0].appendChild(script);
回答by Nickolas Hook
If injecting multiple script tags in the head like this with mix of local and remote script files a situation may arise where the local scripts that are dependent on external scripts (such as loading jQuery from googleapis) will have errors because the external scripts may not be loaded before the local ones are.
如果像这样混合本地和远程脚本文件在头部注入多个脚本标签，可能会出现依赖于外部脚本的本地脚本（例如从 googleapis 加载 jQuery）会出错的情况，因为外部脚本可能不是在本地加载之前加载。
So something like this would have a problem: ("jQuery is not defined" in jquery.some-plugin.js).
所以这样的事情会有问题：（jquery.some-plugin.js 中的“jQuery 未定义”）。
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);
Of course this situation is what the .onload() is for, but if multiple scripts are being loaded that can be cumbersome.
当然，这种情况就是 .onload() 的用途，但是如果加载了多个脚本，那可能会很麻烦。
As a resolution to this situation, I put together this function that will keep a queue of scripts to be loaded, loading each subsequent item after the previous finishes, and returns a Promise that resolves when the script (or the last script in the queue if no parameter) is done loading.
作为对这种情况的解决方案，我将这个函数放在一起，该函数将保留一个要加载的脚本队列，在前一个完成后加载每个后续项目，并返回一个 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;
};
With this adding scripts in order ensuring the previous are done before staring the next can be done like...
通过添加脚本以确保在开始下一个之前完成前一个可以像......
["https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
"/jquery.some-plugin.js",
"/dependant-on-plugin.js",
].forEach(load_script);
Or load the script and use the return Promise to do work when it's complete...
或者加载脚本并在完成后使用返回 Promise 来完成工作......
load_script("some-script.js")
.then(function() {
/* some-script.js is done loading */
});
回答by GuerraTron
try out ::
试用 ：：
var script = document.createElement("script");
script.type="text/javascript";
script.innerHTML="alert('Hi!');";
document.getElementsByTagName('head')[0].appendChild(script);回答by Dmitry Masley
var script = $('<script type="text/javascript">// function </script>')
document.getElementsByTagName("head")[0].appendChild(script[0])
But in that case script will not be executed and functions will be not accessible in global namespase.
To use code in <script>you need do as in you question
但在这种情况下，脚本将不会被执行，并且函数将无法在全局命名空间中访问。要在<script>您需要按照您的问题使用代码
$('head').append(script);
$('head').append(script);
回答by Not loved
This is an old question, and I know its asking specifically about adding a script tag into the head, however based on the OPs explanation they actually just intend to execute some JS code which has been obtained via some other JS function.
这是一个老问题，我知道它专门询问在头部添加脚本标签，但是根据 OP 的解释，他们实际上只是打算执行一些通过其他 JS 函数获得的 JS 代码。
This is much simpler than adding a script tag into the page.
这比在页面中添加脚本标签简单得多。
Simply:
简单地：
eval(decoded);
Eval will execute a string of JS in-line, without any need to add it to the DOM at all.
Eval 将内联执行一串 JS，根本不需要将其添加到 DOM。
I don't think there's ever really a need to add an in-line script tag to the DOM after page load.
我不认为真的需要在页面加载后向 DOM 添加内嵌脚本标记。
More info here: http://www.w3schools.com/jsref/jsref_eval.asp
回答by liljoshu
As per the author, they want to create a script in the head, not a link to a script file.
根据作者的说法，他们想在头部创建一个脚本，而不是指向脚本文件的链接。
That may possibly be done as such:
这可能是这样做的：
var script = document.createTextNode("<script>alert('Hi!');</script>");
document.getElementsByTagName('head')[0].appendChild(script);
回答by T.Todua
Best solution I've found:
我发现的最佳解决方案：
Append_To_Head('script', ' alert("hii"); ');
//or
Append_To_Head('script', 'http://example.com/script.js ');
//or
Append_To_Head('style', ' #myDiv{color:red;} ');
//or
Append_To_Head('style', 'http://example.com/style.css ');
function Append_To_Head(elemntType, content){
// if provided content is "link" or "inline codes"
var Is_Link = content.split(/\r\n|\r|\n/).length <= 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);
}
回答by Ulad Kasach
I use PHP as my serverside language, so the example i will write in it - but i'm sure there is a method in your server side as well.
我使用 PHP 作为我的服务器端语言，因此我将在其中编写示例 - 但我确定您的服务器端也有一种方法。
Just have your serverside language add it from a variable. w/ php something like that would go as follows.
只需让您的服务器端语言从变量中添加它即可。w/ php 类似的东西会如下。
Do note, that this will only work if the script is loaded with the page load. If you want to load it dynamically, this solution will not help you.
请注意，这仅在脚本与页面加载一起加载时才有效。如果你想动态加载它，这个解决方案对你没有帮助。
PHP
PHP
HTML
HTML
<head>
<script type="text/javascript"> <?php echo $decodedstring ?> </script>
</head>
In Summary: Decode with serverside and put it in your HTML using the server language.
总结：使用服务器端解码并使用服务器语言将其放入 HTML 中。
回答by Sudhir Bastakoti
you could do:
你可以这样做：
var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript";
scriptTag.src = "script_source_here";
(document.getElementsByTagName("head")[0] || document.documentElement ).appendChild(scriptTag);
回答by jonathana
Here is a safe and reusable function for adding script to head section if its not already exist there.
这是一个安全且可重用的函数，用于将脚本添加到 head 部分，如果它不存在的话。
see working example here: 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>
