jQueryで外部JSファイルを動的に読み込む方法とコード例

外部JSファイルを読み込む場合、head内などで読み込むのが普通だと思います。

しかし場合によってはJSコード内で動的に読み込みしたい場合もあるはず

そこでjQuery（またはJavaScript）で外部JSを動的に読み込む方法についてまとめました。

このページの目次

外部JSを読み込みさせる（jQueryの場合）
外部JSを読み込みさせる（JavaScriptの場合）
外部JSファイル読み込みの実用的な例
外部CSSファイルを読み込みさせるには・・・
ここまでのまとめ

外部JSを読み込みさせる（jQueryの場合）

jQueryで外部JSを読み込みさせる方法はそれほど難しくありません。

外部JSファイルを読み込みするscriptタグを作り、bodyタグに追加するだけです。

その具体的なコード例は次の通り

まず次のような内容の outer.js というファイルがあるとしましょう。

$('div.example').css({
  'background': 'lightgray'
});

$('div.example').css({

'background': 'lightgray'

});

そしてこの outer.js を外部ファイルとして動的に読み込みしているのが次のjQueryコード

$(function(){
  var script = $('<script>').attr({
    'type': 'text/javascript',
    'src': 'outer.js'
  });
  $('body')[0].appendChild(script[0]);
});

$(function(){

var script = $('<script>').attr({

'type': 'text/javascript',

'src': 'outer.js'

});

$('body')[0].appendChild(script[0]);

});

上のコード内でしていることは

$('<script>') でスクリプト要素を作成
attrメソッドでtypeとsrc属性値を設定
最後にbody要素に作成したscript要素をねじこむ

というような処理をしているだけです。

ただし最後のbody要素にscript要素を追加する処理はjQueryではなく、JavaScriptのappendChildメソッドを使って行っています。

なぜかこうしないと正常に動かなかったので、わざわざ回りくどいような書き方になってしまいました。

以上がjQueryで外部JSファイルを読み込みする手順

ただし今紹介した例だとページロードと同時に外部JSを読み込んでいるのであまり意味はないです。

こういう動的読み込みが役に立つのはイベントを組み合わせた場合（後で紹介）ですね。

外部JSを読み込みさせる（JavaScriptの場合）

当然jQueryを使わずとも純粋なJavaScriptでも同じことはできます。

例えば次が先ほどの例をJavaScriptのみで置き換えたコード例

window.onload = function(){
  var script = document.createElement("script")
  script.type = "text/javascript";
  script.src = "outer.js";
  document.body.appendChild(script);
};

window.onload = function(){

var script = document.createElement("script")

script.type = "text/javascript";

script.src = "outer.js";

document.body.appendChild(script);

};

script要素を作成　⇒　src属性値を設定　⇒　body要素に追加

という風にやっていることはjQueryの場合と全く変わりません。

外部JSファイル読み込みの実用的な例

最後にイベントを組み合わせた少し実用的な例を紹介します。

ここで紹介するのはボタンクリック時に外部JSファイルを読み込みする例です。

そのコード例は次の通り

まず次のようなボタン要素を作成

<button id="load_js_btn">Load outer JS</button>

1	<button id="load_js_btn">Load outer JS</button>

このボタンが押されたときに外部JSファイルを読み込みさせます。

それが次のjQueryコード

jQuery(function(){
  jQuery('#load_js_btn').on('click', function(){
    var script = $('<script>').attr({
      'type': 'text/javascript',
      'src': 'outer.js'
    });
    $('body')[0].appendChild(script[0]);
  });
});