Edited at

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

More than 1 year has passed since last update.


この記事を書くきっかけ

テキストエリアに入力された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スキームは便利だなぁ、あまり使わないので存在を忘れかけていました。

というわけで今回はこんな方法で実現できました。

できましたけども、もっといい方法があるんだろうなと思う日々