scriptタグを動的に追加して、同期して実行する。

基本的には静的なscriptタグで読み込むものだが、 諸々の事情で動的に変更したい場合があるかもしれない。

ただし、PHPなどのサーバサイドアプリケーションがあるなら、 そちら側で動的にHTMLを書き換えてしまう方が良い。

今回は、サーバサイドアプリケーションが無い前提で、jsで頑張ってみる。

スクリプトタグを動的に挿入したい（非同期）

以下のようなコードでできる。 ただし、非同期的に実行されるので、実行順序（他のscriptタグやHTMLの評価順序）は保証されない。

var script = document.createElement('script');
script.setAttribute('src', 'path/to/script.js');
document.head.appendChild(script);

スクリプトタグを動的に挿入したい（同期）

以下のようなコードになる。 AJAXでjsを取得し、scriptタグ内に埋め込む。 そのscriptタグをHTMLに挿入する。

由緒正しい（？）jQueryのコードを追って調べたので大丈夫だと思う。

var request = new XMLHttpRequest();
request.open('GET', 'path/to/script.js', false);
request.send(null);

if (request.status === 200) {
  var script = document.createElement('script');
  script.text = request.responseText;
  document.head.appendChild(script);
}