iframeでJavaScriptを動的に実行する
(タイトルおかしいと思ったので編集しました)
iframeを用いてJavaScriptコードを動的実行する。
やり方は主に3つ(多分)あって、
document.write(content);
と
document.srcdoc=content;
と
document.appendChild(content);
がある。docは同じとは限らない。
write版
var doc = document.getElementById("iframe").contentWindow.document; var content = 'console.log("Hello World!");'; doc.open(); doc.write('<div><script>' + content + '<\/script><\/div>'); doc.close();
srcdoc版
var doc = document.getElementById("iframe"); doc.srcdoc = '<div><script>console.log("Hello World!");<\/script><\/div>';
appendChild版
var script = document.createElement("script"); script.type = "text/javascript"; script.innerHTML = 'console.log("Hello World!")'; doc.body.appendChild(script);
write版とappendChildは直接iframe内のHTMLに挿入する感じ。対してsrcdoc版はタグの要素に入れるため生成後のHTMLコードを見ると汚いと感じるかもしれない。
"と'は使い分けていかないと動かないので注意
こういったことも可能らしい
ja.stackoverflow.com
個人的にはappendChild版が一番好き
パフォーマンスは知らない。
あとJSファイルを作成して追加する方法もできそう。