JavaScript:iframe:外部のページを埋め込むのではなく、HTMLをそのまま埋め込む、第３の可能性:独自のデータ属性を使用する

イントロダクション

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.ウーパのコンピュータ備忘録

今回は、それら以外の、第３の方法を考えてみました。
それは、独自のデータ属性を定義して、そのデータ属性の値を用いて、JavaScript で動的に iframe に HTML 文書を生成する方法です。

独自のデータ属性を定義して、そのデータ属性の値を用いて、JavaScript で動的に iframe に HTML 文書を生成する方法

概要

iframe に data-srcdoc という独自のデータ属性を定義します。

独自データ属性 - グローバル属性 - HTML5 タグリファレンス - HTML5.JP
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='

から

' id="iframe-target">

までの間に、iframe で埋め込むコンテンツを埋め込みます。

なお、data-srcdoc 属性の値を囲むのに、'(シングルクォーテーション) を使用しているため、data-srcdoc 属性の値として '(シングルクォーテーション) が含まれていると、上手く動作しません。

プレビュー

なお、この本文は Google のブログサービス「Blogger」にて表示しているので、このページのソースコードを見てもらえればわかりますが、iframe の data-srcdoc 属性の値が自動的にエスケープされています。

そのため、厳密にはプレビューにはなっていません。

ただし、ローカル環境にて、data-srcdoc 属性の値がエスケープされていない場合でも、正常に動作することを確認しています。

メリット

iframe を用いて、HTML 文書をそのまま埋め込むことができます。

これは、「すべてのケースにおいて、JavaScript で動的に iframe に HTML 文書を生成する」方式における、デメリットの一つであった”事前に埋め込むHTMLを埋め込める形式に変換しなければならない”という問題点を克服している点です。

すべてのブラウザで iframe に HTML 文書を追加するときの挙動が統一されます。

デメリット

JavaScript が OFF になっている環境では iframe 内に HTML 文章を表示できない
JavaScript による処理負荷が発生する

まとめ

このように、iframe を用いて、HTML をそのまま埋め込む方式として、「JavaScript:iframe:外部のページを埋め込むのではなく、HTMLをそのまま埋め込みたい」に引き続き、これで 3 つ目の方法を挙げることが出来ました。

目的に応じて、適切な方法を使っていきたいところです。

このブログ内の、他の”iframe”についての情報を見る

Dr.ウーパのコンピュータ備忘録

2015年3月26日木曜日