Javascriptで生成したHTMLをiframe内で表示させる方法

参考リンク曰く、「かなり限られたユースケース」に遭遇してしまったためメモ

コード

var iframe = document.getElementById('myframe');
var html = '<h1>こんにちはせかい</h1>';

var blob = new Blob([html], { type: 'text/html' });
iframe.src = URL.createObjectURL(blob);

サンプル

See the Pen frame by thr3a (@thr3a) on CodePen.

上のサンプルを見れば一目瞭然だが、本来ifarmeではsrcに別のURL or パスを指定して外部のHTMLを呼び出して表示させているが、これは１つのJavascript内で完結させている。しかもヒアドキュメントだから書きやすい。

対応ブラウザ

技術的にはBlob URL Schemeを使っている。Chrome,Firefoxは問題なし。IEは11以上。

Can I use... Support tables for HTML5, CSS3, etc

参考リンク

• 別のHTMLを用意せずにiframeを表示する - Qiita