Javascriptでスクリプトタグを動的に追加する

Question

HTMLページでJavascriptを使用してスクリプトタグを動的に追加しようとしています。コードの直後に、新しく追加されたスクリプトのいくつかの関数を呼び出そうとしています。しかし、その時点ではスクリプトがまだロードされていないため、JSエラーが発生しています。私は複数の投稿を通過しましたが、あなたのスクリプトを明示的に追加する方法については説明していません。

Answer 1

あなたはonloadあなたの新しく追加されたスクリプトのイベント、またはIE < IE < 11 11.

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

script.onload = function() { 
    // it's ready, so call your functions here 
} 

// now insert your new script into the document 

ためonreadystatechangeをリッスンする必要があります。これは、あなたが実行できるようになります

script.onreadystatechange = function() { 
    if (script.readyState === 'loaded' || script.readyState === 'complete') { 
    // it's ready, so call your functions here 
    } 
} 

Answer 2

スクリプトは、ページ全体が読み込まれたときにのみ表示されます。これを行うには他の方法がありますが、私はこれがシンプルで効果的だと思います。

<script> 
    function downloadJSAtOnload() { 
     var element = document.createElement("script"); 
     element.src = './js/ding.js'; 
     document.body.appendChild(element); 
     var element1 = document.createElement("script"); 
     element1.src = './js/dong.js'; 
     document.body.appendChild(element1); 
    } 
    if (window.addEventListener) 
     window.addEventListener("load", downloadJSAtOnload, false); 
    else if (window.attachEvent) 
     window.attachEvent("onload", downloadJSAtOnload); 
    else window.onload = downloadJSAtOnload; 
</script> 

bodyタグの末尾にあなたのページに置きます。このコードブロックでインポートされたものは、最後に実行されたすべてのスクリプトが確実に実行されます。

意味的なので、このパターンはすべての場所で使用します。私の 'ライブラリ'タイプのスクリプトは私の頭の中にロードされ、私のカスタムコードは実行前にDOM全体がレンダリングされるのを待ちます。