我想在网页中动态地包括一个脚本标签,但我无法控制它的src,所以src="source.js"可能看起来像这样。
document.write('<script type="text/javascript">')
document.write('alert("hello world")')
document.write('</script>')
document.write('<p>goodbye world</p>')
一般来说
<script type="text/javascript" src="source.js"></script>
在头部工作很好,但有没有其他方法,我可以动态添加source.js使用innerHTML之类的东西?
我已经试过了
要做到这一点,唯一的方法是替换文档。使用您自己的函数编写,该函数将在页面底部附加元素。jQuery非常简单:
document.write = function(htmlToWrite) {
$(htmlToWrite).appendTo('body');
}
如果你有html来文档。像问题样例那样写入块,你需要缓冲htmlToWrite段。也许是这样的:
document.write = (function() {
var buffer = "";
var timer;
return function(htmlPieceToWrite) {
buffer += htmlPieceToWrite;
clearTimeout(timer);
timer = setTimeout(function() {
$(buffer).appendTo('body');
buffer = "";
}, 0)
}
})()
我写了一个漂亮的小脚本来加载多个脚本:
function scriptLoader(scripts, callback) {
var count = scripts.length;
function urlCallback(url) {
return function () {
console.log(url + ' was loaded (' + --count + ' more scripts remaining).');
if (count < 1) {
callback();
}
};
}
function loadScript(url) {
var s = document.createElement('script');
s.setAttribute('src', url);
s.onload = urlCallback(url);
document.head.appendChild(s);
}
for (var script of scripts) {
loadScript(script);
}
};
用法:
scriptLoader(['a.js','b.js'], function() {
// use code from a.js or b.js
});