スクリプトを動的に読み込む方法

スクリプトを動的に読み込むには、scipt要素をスクリプトで作成し、それをドキュメントに追加します。コードで記述すると、それは次のようになります。

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

script.type = 'text/javascript';
script.src = filename;

var firstScript = document.getElementsByTagName( 'script' )[ 0 ];
firstScript.parentNode.insertBefore( script, firstScript );

作成済みのscript要素のsrcプロパティだけを変更する方法では、初回の1回だけしか読み込みが実行されません。よってこのようにscript要素の作成から行います。

この方法を利用して、クロスドメインでデータを取得するJSONP (JSON with padding) という手法があります。

動的に読み込めないスクリプト

動的に読み込まれたスクリプト内では、document.write()の呼び出しが無視されます。よってdocument.write()を使用しているスクリプトは、動的に読み込めません。

スクリプトの読み込み完了の捕捉

動的に読み込んだスクリプトの読み込み完了は、onloadイベントハンドラで捕捉できます。

script要素を追加する位置

ドキュメントの最初にあるscript要素の直前に追加するのが、もっとも高速なようです(※要検証)。たとえばGoogle Analyticsではそのようになっており、以下がそのコードです。appendChild vs insertBefore | High Performance Web Sites

var ga = document.createElement( 'script' );
ga.type = 'text/javascript';
ga.src = ( 'https:' == document.location.protocol ?
    'https://ssl':'http://www' ) + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName( 'script' )[ 0 ];
s.parentNode.insertBefore( ga, s );
Google Analyticsのトラッキングコード

とりあえずbody要素の最後に追加しても、動作はします。

document.body.appendChild( script );

参考

関連ページ

JavaScriptのドキュメントから検索