動態添加腳本標籤與src，可能包括document.write

我想動態地包括一個腳本標籤在網頁上，但我沒有控制它的src所以src =「source.js」可能看起來像這樣。動態添加腳本標籤與src，可能包括document.write

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 of what i've tried

來源

2012-10-29 Cadell Christo

經過數小時的苦苦掙扎後，解決方案是！ [https://github.com/krux/postscribe/](https://github.com/krux/postscribe/） –

[async loading with document.write]可能出現重複（http://stackoverflow.com/ questions/13003644/async-loading-javascript-with-document-write） –

108

var my_awesome_script = document.createElement('script'); 

my_awesome_script.setAttribute('src','http://example.com/site.js'); 

document.head.appendChild(my_awesome_script);

來源

2012-10-29 12:51:29 dmp

可以使用document.createElement()功能是這樣的：

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

來源

2012-10-29 12:51:30 Sirko

你會如何做這個異步？ –

@mobile bloke：s.async = true; – axlotl

s.setAttribute（'src'，src）;可能是 s.src = src（我認爲？）我知道這不是pcg – Brandito

存在着時調用腳本加載成功的Onload功能：

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

來源

2014-12-14 10:41:04 MSS

一個可愛的小我寫的加載多個腳本的腳本：

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

來源

2016-06-19 09:04:45 EliSherer

對不起...只是發現一個更好的允許依賴關係 http://stackoverflow.com/a/1867135/678780 – EliSherer

做到這一點的唯一方法是用自己的功能，將追加元素到你的頁面的底部，以取代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) 
    } 
})()

來源

2017-06-15 18:29:05

你可以嘗試下面的代碼片段。

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

來源

2017-11-02 06:03:35 vaenow

動態添加腳本標籤與src，可能包括document.write

回答

相關問題