メモ帳

やったこととかちまちまと書く 需要のない記事を生成している

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ファイルを作成して追加する方法もできそう。

広告を非表示にする