javascriptでiframeの中身全てを書き換える

この記事を書くきっかけ

テキストエリアに入力されたHTMLの内容をまるっと
iframeに反映できないかなーと思ってやってみたところできたのでそのメモです。

コード

sample.html

<iframe id="preview"></iframe>
<textarea id="text" rows="8" cols="80"></textarea>
<button id="apply" name="button">適用</button>

<script>
$("#apply").on('click', function(){

    // textareaの中身をDataURIスキーマにする。
    var dataUri = "data:text/html;charset=utf-8,"+$("#text").val();
        
    // iframeのsrc属性に指定。
    $('#preview').attr('src', dataUri);

});
</script>

• bodyタグ内のみ記載
• jQuery.3.2.1.min.jsを使用

悩んだところ

headタグやbodyタグの操作は普通にできると思ったのですが
中身全てとなるとどうやればいいんだろうと思いました。

解決方法

DataURIスキームを使う。
base64画像みたいにリソースを外部ファイルではなく、ページに埋め込め要領でやればいけるなと

まとめ

DataURIスキームは便利だなぁ、あまり使わないので存在を忘れかけていました。
というわけで今回はこんな方法で実現できました。
できましたけども、もっといい方法があるんだろうなと思う日々