イントロダクション
HTML の iframe タグを使用して、外部のページではなく、コンテンツそのものを埋め込む方法として、(1) srcdoc 属性に対応していない場合のみ、JavaScript で動的に iframe に HTML 文書を追加する
(2) すべてのケースにおいて、JavaScript で動的に iframe に HTML 文書を生成する
という方法があることを、以下のページで解説しました。
JavaScript:iframe:外部のページを埋め込むのではなく、HTMLをそのまま埋め込みたい
http://upa-pc.blogspot.com/2015/03/javascript-iframe-srcdoc.html
Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/03/javascript-iframe-srcdoc.html
Dr.ウーパのコンピュータ備忘録
今回は、それら以外の、第３の方法を考えてみました。
それは、独自のデータ属性を定義して、そのデータ属性の値を用いて、JavaScript で動的に iframe に HTML 文書を生成する方法です。
独自のデータ属性を定義して、そのデータ属性の値を用いて、JavaScript で動的に iframe に HTML 文書を生成する方法
概要
iframe に data-srcdoc という独自のデータ属性を定義します。
独自データ属性 - グローバル属性 - HTML5 タグリファレンス - HTML5.JP
http://www.html5.jp/tag/attributes/data.html
http://www.html5.jp/tag/attributes/data.html
data-srcdoc 属性の値として、iframe に追加したい HTML ソースコードを、iframe を保持する HTML 文書に埋め込みます。
そして、ページ読み込み時に、JavaScript によって、data-srcdoc 属性の値を、iframe の中身として書き出します。
ソースコード
<iframe data-srcdoc='
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>sample</title>
</head>
<body>
iframe 埋め込み コンテンツ
</body>
</html>
' id="iframe-target">
</iframe>
<script type="text/javascript">
<!--
// javascript で iframe の中身を作成する
// data-srcdoc から html データ取得
(function () {
var iframe = document.getElementById("iframe-target");
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(iframe.getAttribute("data-srcdoc"));
iframe.contentWindow.document.close();
})();
//-->
</script>
解説
iframe タグの、<iframe data-srcdoc='
から
までの間に、iframe で埋め込むコンテンツを埋め込みます。
なお、data-srcdoc 属性の値を囲むのに、'(シングルクォーテーション) を使用しているため、data-srcdoc 属性の値として '(シングルクォーテーション) が含まれていると、上手く動作しません。
プレビュー
なお、この本文は Google のブログサービス「Blogger」にて表示しているので、このページのソースコードを見てもらえればわかりますが、iframe の data-srcdoc 属性の値が自動的にエスケープされています。
そのため、厳密にはプレビューにはなっていません。
ただし、ローカル環境にて、data-srcdoc 属性の値がエスケープされていない場合でも、正常に動作することを確認しています。
メリット
- iframe を用いて、HTML 文書をそのまま埋め込むことができます。
- すべてのブラウザで iframe に HTML 文書を追加するときの挙動が統一されます。
デメリット
- JavaScript が OFF になっている環境では iframe 内に HTML 文章を表示できない
- JavaScript による処理負荷が発生する
まとめ
このように、iframe を用いて、HTML をそのまま埋め込む方式として、「JavaScript:iframe:外部のページを埋め込むのではなく、HTMLをそのまま埋め込みたい」に引き続き、これで 3 つ目の方法を挙げることが出来ました。目的に応じて、適切な方法を使っていきたいところです。
コメントを投稿 （ここをクリックしてコメント投稿フォームを表示）
コメント投稿機能について