2015/4/28

JavaScriptで動的にscriptタグを差し込んだり、実行する方法

こんにちは、@s_tsukaです。今回は珍しくJavaScriptネタでいこうと思います。

自分のJS力はそれほど高くないですし、ブラウザやW3Cの仕様に詳しくないですが、scriptタグはハマりポイントだと思うので、書いておきます。（といっても今回のは一般的ではないです）

今回は生のJSを扱います。（最近はAngularや、Reactが流行っていますが、未だに生JSのニーズもあるんですよ）

結論から言うと、単一scriptタグならappendChild、複雑なタグならdocument.write + iframeです。

scriptタグ

このページにたどり着いた読者には説明不要かと思いますが・・・

scriptタグをHTMLファイル上に記述し、ブラウザに読み込ませると、そのscriptが起動します。例えばこんな感じで。

<html>
  <head>
    <script>
      alert(1);
    </script>
  </head>
  <body>
    sample
  </body>
</html>

このようなHTMLを開くと画面上にブラウザのダイアログが出現して1と表示されます。

ブラウザはHTMLをDLすると上からparseを開始します。parseを行いつつ、DOM構築を行いますので、通常scriptタグはDOM構築をブロックしないようにbodyの最下部に記述します。ですが、jsファイルをDLしないとページが動作しない、あるいはなるべく早くJSを動かしたい、という場合はheadタグ内に<script src=“http://foo.js…(略)　というように記述します。

ブロック考慮＝body最下部早めにDLしておきたい＝head内

という感じですね。

動的にscriptタグを生成、追加する方法

通常であればscriptタグはHTML上に直接記述するか、あるいは何らかのテンプレートエンジンによって(scriptタグを含む)HTMLを生成し、それをブラウザへ返却するか、scriptのsrc属性を使って外部ファイルを読み込むと思います。

つまり、(一度ページが描画された後で)動的にscriptタグを生成して、実行する、などはあまりないと思います。（一部では常識的に使われますが）

前述の動的でないケースであれば特に問題はありませんが、場合によってはそのブラウザにDLさせたHTMLからscriptを起動し、そのJavaScriptコードによって、scriptタグをHTML上に挿入する、(そしてそのscriptを起動)ということを行うかと思います。

文章だと難しいですが、イメージだとこんな感じです。id=abcの部分にelementを挿入したい、という感じです。

<html>
<head>
</head>
<body>
<span>Insert here! [start]</span>
  <div id="abc">
  </div>
<span>Insert here! [end]</span>

<script>
  var ele = document.getElementById("abc");
  ele.innerHTML = "<script>alert(123);<\/script>";
</script>

</body>
</html>

ちなみにこれはダメな例です。正しく動きません。

意図はわかっていただけるかと思います。動的にscriptタグを挿入して、実行したいのです。

こういう場合はappendChildメソッドを利用します。script elementを生成し、これをappendChildするとうまく動きます。

<html>
<head>
</head>
<body>
<span>Insert here! [start]</span>
  <div id="abc">
  </div>
<span>Insert here! [end]</span>

<script>
  var s = document.createElement("script");
  s.innerHTML = "alert(123)";

  var ele = document.getElementById("abc");
  ele.appendChild(s);
</script>

</body>
</html>

実際に実行すると123が出力されると思います。

余談ですが、この静的に記述されている部分のscriptをheadの部分に記述するとscriptが動くタイミングではまだDOM parseができておらず、id 123が見つからなくてエラーになります。なのでbodyの下の方に書いています。

動的にscriptタグを含むような複雑なDOMを生成、追加する方法

上記のscriptタグが１つだけの場合は簡単ですが、scriptタグが複数あったり、divタグの中にscriptタグがあったり、そもそもそれらの構造が一定じゃなくてどうDOM構築すりゃいいんだ・・・的な状況になった場合、一気に難しくなります。

例えば上記の例を真似て、以下のコードを動かしてみます。

<html>
<head>
</head>
<body>
<span>Insert here! [start]</span>
  <div id="abc">
  </div>
<span>Insert here! [end]</span>

<script>
  var d = document.createElement("div");
  d.innerHTML = "<script>alert(123);<\/script>";

  var ele = document.getElementById("abc");
  ele.appendChild(d);
</script>

</body>
</html>

これは動的にdivを生成して、appendChildしています。みなさんは既にappendChildでscriptが動くことを知っています・・・が！残念ながらこの場合はscriptは動きません。

これに対応する方法は２つあります。(実際はもう少し他にもあると思いますが)

appendするタグの中身を解析して、scriptがあった場合、逐一appendChildで１つずつ挿入する（構造を壊さないように注意しつつ）
document.writeを使ってHTML片を出力する

appendの方はdivのparseなんてしてられるか！という感じですね。

document.writeの場合は、そのscriptタグの場所にdocumentを書く、という挙動になる上に、document.writeはブロッキングしますので、画面描画が一気に遅くなります。

なかなか良い方法は無いのですが、

「一時的にiframeを作成し、そこにdocument.writeでHTMLを書き出し、実行させる」という方法が良いかと思います。

例えばこんな風に。

<html>
<head>
</head>
<body>
<span>Insert here! [start]</span>

<div id="abc">
</div>
<span>Insert here! [end]</span>

<script>
  var iframe = document.createElement('iframe');
  iframe.setAttribute("style", "display:none");
  document.getElementById("abc").appendChild(iframe);

  var doc = iframe.contentWindow.document;
  doc.open();
  doc.write("<div><script>alert(123);<\/script><\/div>");
  doc.close();
</script>

</body>
</html>

iframeは不可視なので表示されず、scriptを実行することができました。

ちなみにこの例は簡略化しています。もし「id=abcの部分にdivを挿入したいのであって、iframeは挿入したくない！」という人がいたら、適宜elementの移動などで調整してください。

iframeにはonLoadを付けることができますので、iframe内のscriptなどの実行完了を待って何かを行うことも可能です。

本来はこういうコードは書きたくない・・・と思う人もいるかと思いますが、諸事情により書かなくてはならないときもあります。そんなときに今回のような方法で実現すると良いかと思います。

以上です。