joh*_*825 15 html javascript jquery dom
我想将DOM元素添加到HTML的head部分.jQuery不允许将DOM元素脚本添加到head部分,而是执行它们,参考.
我想添加script标签并在<head>部分内编写脚本.
var script = '<script type="text/javascript"> //function </script>'
$('head').append(script);
有这样的功能.我试过jQuery和javascript \,但它不起作用.
请告诉我如何script通过jQuery或javascript 添加和写入头部.
我厌倦了javascript来添加DOM元素,但它不能.innerHTML()用于写入头部.我正在使用jQuery 2.0.3和jQuery UI 1.10.3.
我想将base64编码脚本添加到head部分.我使用的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().
pba*_*ris 38
试试这个
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'url';
document.getElementsByTagName('head')[0].appendChild(script);
Nic*_*ook 11
如果使用本地和远程脚本文件的混合在头部中注入多个脚本标记,则可能出现这样的情况,即依赖于外部脚本的本地脚本(例如从googleapis加载jQuery)将出现错误,因为外部脚本可能不是在本地之前加载.
所以这样的事情会有问题:( 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);
当然这种情况是.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);
或者加载脚本并使用返回Promise在完成后继续工作......
load_script("some-script.js")
.then(function() {
/* some-script.js is done loading */
});
小智 7
试用 ：：
var script = document.createElement("script");
script.type="text/javascript";
script.innerHTML="alert('Hi!');";
document.getElementsByTagName('head')[0].appendChild(script);根据作者的说法，他们想在头部创建一个脚本，而不是指向脚本文件的链接。此外，为了避免 jQuery（在这种情况下几乎没有提供有用的功能）的复杂性，vanilla javascript 可能是更好的选择。
这可能是这样做的：
var script = document.createTextNode("<script>alert('Hi!');</script>");
document.getElementsByTagName('head')[0].appendChild(script);
我找到的最佳解决方案：
AppendToHead('script', 'alert("hii"); ');
//or
AppendToHead('script', 'http://example.com/script.js');
//or
AppendToHead('style', '#myDiv{color: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);
}
| 归档时间： |
|
| 查看次数： |
76999 次 |
| 最近记录： |