2017-10-27 15 views
1

スクリプトの配列がループしているときにDOMにjavascriptを追加することは可能ですか?そうすれば、scripts [0]が読み込まれた後にscripts [1]が読み込まれるようになります。以下は配列からスクリプトタグを追加する

var scripts = [["external", "https://code.jquery.com/jquery-3.2.1.min.js"], 
       ["internal", "$('body').append('hello world');"], 
       ["internal", "//some javascript code"], 
       ["external", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"]]; 

私の現在のコード

for (var i = 0; i < scripts.length; i++) { 
    var script = document.createElement("script"); 
     script.type = "text/javascript"; 
    if (scripts[i][0] == "external") script.src = scripts[i][1]; 
    if (scripts[i][0] == "internal") script.innerHTML = scripts[i][1]; 
    document.getElementsByTagName("head")[0].appendChild(script); 
} 
+1

[ドキュメント・レディ](https://learn.jquery.com/using-jquery-core/document-ready/)十分ではありませんか? –

+0

このシナリオでは、document.readyがどのように役立つかわかりません。私はスクリプト要素のonloadイベントがあることを知っていますが、それは起動しないようです。 – AZee

+0

スクリプトはロードされないか、ロードされますが、非同期エラーが発生します。 –

答えて

0

最後に、私は以下のコードでそれ働いてしまっています。

うまくいけば、これは他の誰かを助けてくれるでしょう。

var urls = [ 
 
\t "https://code.jquery.com/jquery-3.2.1.min.js", 
 
\t "$('body').append('hello world');", 
 
\t "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js", 
 
\t "console.log('hi there');"]; 
 

 
var i = 0; 
 
var recursiveCallback = function() { 
 
    if (i++ < urls.length - 1) { 
 
    loadScript(urls[i], recursiveCallback) 
 
    } else { 
 
    alert('All scripts loaded successfully!'); 
 
    } 
 
} 
 
loadScript(urls[0], recursiveCallback); 
 
function loadScript(url, callback) { 
 
\t var script = document.createElement("script"); 
 
\t script.type = "text/javascript"; 
 
\t if (script.readyState) { // Internet Explorer 
 
\t \t script.onreadystatechange = function() { 
 
\t \t \t if (script.readyState == "loaded" || 
 
\t \t \t \t script.readyState == "complete") { 
 
\t \t \t \t script.onreadystatechange = null; 
 
\t \t \t \t callback(); 
 
\t \t \t } 
 
\t \t }; 
 
\t } else { 
 
\t \t script.onload = function() { 
 
\t \t \t callback(); 
 
\t \t }; 
 
\t } 
 
\t if (url.substring(0, 4) == "http") { 
 
\t \t script.src = url; 
 
\t } else { 
 
\t \t script.innerHTML = url; 
 
\t \t callback(); 
 
\t } 
 
\t document.getElementsByTagName("head")[0].appendChild(script); 
 
}

関連する問題