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

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

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

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

外部JSを読み込みさせる(jQueryの場合)

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

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

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

 

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

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

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

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

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

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

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

 

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

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

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

外部JSを読み込みさせる(JavaScriptの場合)

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

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

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

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

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

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

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

そのコード例は次の通り

 

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

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

それが次のjQueryコード

こういう風にイベントと組み合わせると動的にJSコードを実行できるようになるので便利です。

また必要になるまでJSファイルを読み込みさせないので少しだけ表示時間短縮にもなります。

外部CSSファイルを読み込みさせるには・・・

ここまでで外部JSファイルを読み込ませるテクニックを紹介しました。

同じように外部CSSファイルもJavaScript内で読み込みさせることができます。

その詳しいやり方やコード例は次の記事で書いた通り

外部JSファイルの場合と似ていますが、やり方は少しだけ違います。

ここまでのまとめ

以上jQueryを使って外部JSファイルを読み込むテクニックについてでした。

イベントなどと組み合わせて動的にJSコードを追加したい場合などに使えるかもしれません。