読者です 読者をやめる 読者になる 読者になる

HTML文字列に含まれるscriptを実行する

HTMLの文字列をXHRで動的に取得してきて、それをdocument.bodyなんかに突っ込む場合があると思います。 その時に文字列中にscriptタグが含まれる場合、elm.innerHTML = html;ってしてもscriptは実行されません。

jQuery.fn.loadはそのへんが考慮されていてscriptも実行してくれます。で、どうやってるのかなーとコード読んでみたのでそのメモ。

  1. 取得したHTML文字列を一旦div.innerHTMLに入れる
  2. div.childNodesをfragmentに順番にappendChildする
  3. fragmentからquerySelectorAll('script')でscriptタグの一覧を取得する
  4. scriptタグを捜査
    • src指定されているものはXHR(sync)でJSのコードを取得してscriptタグを作ってdocument.headに追加して実行
    • src指定じゃないものはtextContentでJSのコードを取得してscriptタグを作ってdocument.headに追加して実行

という感じになってました。 へーと思いながら見てたんですが、JSのコード取得をsyncで順番に行っているのでsrc指定のJSが大量に含まれているとjQuery.fn.loadの時間がすごく掛かりそう(UIをブロックする)

というわけでJSのコードを非同期で並列取得する版を作れば捗りそう。