JavaScriptからjsファイルを呼び出す方法

  • このエントリーをはてなブックマークに追加
  • Pocket

HTMLからではなく外部のjsファイルから他のjsファイルをインクルードする方法。

CSSみたいにできると簡単なんだけど、JavaScriptにはインポート機構がないので無理くり実装する。

やること

document.write()を使って外部jsファイルをHTMLに挿入する。

特に難しいことはないが、読み込んだjsファイルが実行されるタイミングだけ注意。

ディレクトリ構成

こんな感じの構成だとする。

index.html

app.js

hoge.js

実行されるタイミングに注意

このまま実装するとこうなる。
スタイリングにBootstrapを使っています。

import-js01

お分かりだろうか。

app.jsの内容からすると先にhoge.jsが実行されると思うじゃん?
だから2番目は 「hoge.jsから追加」 になると思うじゃん?

ところがどっこい・・・
夢じゃありません・・・!
現実です・・・!
これが現実・・・!

処理タイミングを制御する

2番目を「hoge.jsから追加」にするためのやり方はいろいろあるけど、簡単なのはこれ。

app.js

↓思った通りの挙動になる。

import-js02

ちなみに、window.onload 等の中にdocument.write()を入れてしまうと、DOM構築が終わった後に実行されるから画面が真っ白になるので注意。

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*