我想在网页中动态地包括一个脚本标签，但我无法控制它的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之类的东西?
我已经试过了
当前回答
当脚本异步加载时，它们不能调用document.write。调用将被忽略，并将警告写入控制台。
你可以使用下面的代码来动态加载脚本:
var scriptElm = document.createElement('script');
scriptElm.src = 'source.js';
document.body.appendChild(scriptElm);
只有当您的源文件属于一个单独的文件时，这种方法才有效。
但如果你有源代码作为内联函数，你想要动态加载，并想要添加其他属性到脚本标签，例如类，类型等，那么下面的代码片段将帮助你:
var scriptElm = document.createElement('script');
scriptElm.setAttribute('class', 'class-name');
var inlineCode = document.createTextNode('alert("hello world")');
scriptElm.appendChild(inlineCode);
document.body.appendChild(scriptElm);
其他回答
有多种方法可以包含动态javascript， 我在很多项目中都使用这个。
var script = document.createElement("script")
script.type = "text/javascript";
//Chrome,Firefox, Opera, Safari 3+
script.onload = function(){
console.log("Script is loaded");
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
你可以调用create一个通用函数，它可以帮助你根据需要加载尽可能多的javascript文件。这里有一个完整的教程。
正确地插入动态Javascript
差不多十年过去了，没有人愿意写Promise的版本，所以这里是我的版本(基于这个awnser):
function addScript(src) {
return new Promise((resolve, reject) => {
const s = document.createElement('script');
s.setAttribute('src', src);
s.addEventListener('load', resolve);
s.addEventListener('error', reject);
document.body.appendChild(s);
});
}
使用
try {
await addScript('https://api.stackexchange.com/js/2.0/all.js');
// do something after it was loaded
} catch (e) {
console.log(e);
}
以下是一个简化的代码片段，与谷歌Analytics和Facebook Pixel使用的代码相同:
!function(e,s,t){(t=e.createElement(s)).async=!0,t.src="https://example.com/foo.js",(e=e.getElementsByTagName(s)[0]).parentNode.insertBefore(t,e)}(document,"script");
将https://example.com/foo.js替换为脚本路径。
你可以像这样使用document.createElement()函数:
function addScript( src ) {
var s = document.createElement( 'script' );
s.setAttribute( 'src', src );
document.body.appendChild( s );
}
这是我的工作。
你可以检查一下。
var script_tag = document.createElement('script'); script_tag.setAttribute(“src”、“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”); document.head.appendChild (script_tag); 窗口。Onload = function() { if (window.jQuery) { //加载jQuery 警报(“在头部添加脚本标签!”); }其他{ //不加载jQuery 警告(“没有在头部添加脚本标签”); ｝ ｝
