1. TOP>
2. JavaScript Tips>
3. 別のjsファイルをロードする

別のjsファイルをロードする

JavaScriptで他のjsファイルを読み込むにはどうすれば良いだろうか。jQueryの$.getScriptメソッドを使えば、簡単に他のjsファイルを読み込むことができる。

注意しなければならないのは、$.getScriptメソッドによるjsファイルの取得は非同期で行われるため、必ずしもそのメソッドから戻った時に対象のjsファイルは有効ではないということだ。通常はDeferredオブジェクト（この場合$.getScriptから返されるjqXHR）のdoneコールバック内で、対象jsファイルに含まれる変数、または関数等を使うことになるだろう。

        // 非同期でスクリプトをロード
        $.getScript('./varandfunc.js')
        .done(function() {
          console.log('x = ' + x + ' y = ' + square(3));
        });

上記のコードでロードするvarandfunc.jsは以下のような単純なものだ。

var x = 100;
function square(n) {
  return n * n;
}

尚、$.getScriptメソッドでロードするjsファイルはキャッシュされない。jsファイルをキャッシュしたい場合、$.ajaxSetupメソッドでajax周りのグローバル設定を変更する。

        $.ajaxSetup({cache: true});

jQuery 1.8以降推奨されていないが、$.ajaxメソッドにasync: falseを渡して、同期的にjsファイルを読み込むことも可能だ。これだと$.ajaxメソッドから戻った時には、既にjsファイルは読み込まれている。また、$.ajaxメソッドならばキャッシュの指定も同時に行うことができる。

        // 同期でスクリプトをロード
        $.ajax({url: './varandfunc.js', dataType: 'script', async: false, cache: true});
        console.log('x = ' + x + ' y = ' + square(3));

実際、Chromeからも以下のような文句を言われてしまう。「メインスレッドでの同期XMLHttpRequestは、ユーザエクスペリエンスに悪影響を及ぼすから推奨されないよ。」と言っているようだ。

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

• jQuery.getScript()
• jQuery.ajax()