动态添加脚本标记与SRC可添加[removed](Dynamically add script ta

我想动态包括网页中的脚本标签，但是我无法控制它的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> 

在头工作正常，但是否有其他办法，我可以添加动态地使用类似的innerHTML source.js？

什么，我已经试过的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:

还有就是onload功能，当脚本已成功加载可以被称为：

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:

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

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

Answer 6:

要做到这一点的唯一方法是更换document.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 7:

那么，有多种方式可以包括动态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);

您可以拨打创建一个通用的功能，它可以帮助需要您加载尽可能多的JavaScript文件。 有关于这一个完整的教程在这里。

插入动态JavaScript的正确方法

文章来源: Dynamically add script tag with src that may include document.write