ユーザー入力に基づいて外部JavaScriptファイルを動的にロード

Question

私はN個の異なるJavaScriptファイルを持っています。ユーザー入力に基づいてHTMLコードに1つだけをロードしたいと思います。誰かが私がこれをどのように達成できるかを指摘できますか？ありがとう！

Answer 1

あなたは、常に動的にいくつかの入力に応じて、あなたのDOMへ<script>タグを挿入することができます。

var myScript = document.createElement('script'); 
myScript.setAttribute('src', 'http://example.com/somescript_depending_on_user_input.js'); 
document.head.appendChild(myScript); 

これは、動的にDOMに<script src="http://example.com/somescript_depending_on_user_input.js"></script>要素を注入し、所望のスクリプトをロードします。スクリプトがリモートURLから読み込まれると、ブラウザによって評価されます。

外部のjavascriptが実際にロードされるのを待っていた場合（<script>要素をDOMに注入するのとは異なる時点）、onloadイベントに登録することができます。あなただけ動的にロードされたスクリプト内で定義されているいくつかの関数を呼び出したい場合、これは非常に便利かもしれない：

myScript.onload = function() { 
    alert('Youpee, my dynamic script was successfully loaded, I can use it in this callback'); 
}; 

はまた、あなたが、これは同様にIEで動作するようにしたい場合は、onreadystatechangeに加入する必要がある場合がありますのでご注意しますイベントはthis articleのようになります。これにより、異なるブラウザ間でコードが動作するようになります。