我想在网页中动态地包括一个脚本标签,但我无法控制它的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之类的东西?

我已经试过了


当前回答

有多种方法可以包含动态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

其他回答

当脚本异步加载时,它们不能调用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);

一行代码(与上面的答案没有本质区别):

document.body.appendChild(document.createElement('script')).src = 'source.js';

有onload函数,可以在脚本成功加载时调用:

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

您可以尝试以下代码片段。

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
}, '<div>innerHTML</div>', function(){});

有多种方法可以包含动态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