dynamic添加脚本标签与可能包括document.write的src

我想dynamic地在网页中包含脚本标签，但是我没有控制它的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.jsdynamic使用像innerHTML的东西？

jsfiddle我试过了

Answer 1

 var my_awesome_script = document.createElement('script'); my_awesome_script.setAttribute('src','http://example.com/site.js'); document.head.appendChild(my_awesome_script); 

Answer 2

你可以像这样使用document.createElement()函数：

 function addScript( src ) { var s = document.createElement( 'script' ); s.setAttribute( 'src', src ); document.body.appendChild( s ); } 

Answer 3

有脚本加载成功时调用的负载函数：

 function addScript( src,callback) { var s = document.createElement( 'script' ); s.setAttribute( 'src', src ); s.onload=callback; document.body.appendChild( s ); } 

Answer 4

我写的一个很好的小脚本来加载多个脚本：

 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 }); 

Answer 5

唯一的方法就是用你自己的函数replacedocument.write ，它会将元素附加到页面底部。 jQuery非常简单：

 document.write = function(htmlToWrite) { $(htmlToWrite).appendTo('body'); } 

如果你有HTML来到像问题的例子块的document.write，你需要缓冲htmlToWrite段。 也许这样的事情：

 document.write = (function() { var buffer = ""; var timer; return function(htmlPieceToWrite) { buffer += htmlPieceToWrite; clearTimeout(timer); timer = setTimeout(function() { $(buffer).appendTo('body'); buffer = ""; }, 0) } })() 

Answer 6

你可以尝试下面的代码片段。

 function addScript(attribute, text, callback) { var s = document.createElement('script'); for (var attr in attribute) { s.setAttribute(attr, attribute[attr] ? attribute[attr] : null) } s.innerHTML = text; s.onload = callback; document.body.appendChild(s); } addScript({ src: 'https://www.google.com', type: 'text/javascript', async: null });