日々のコンピュータ情報の集積と整理

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

2015年3月26日木曜日

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

イントロダクション

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


今回は、それら以外の、第3の方法を考えてみました。
それは、独自のデータ属性を定義して、そのデータ属性の値を用いて、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 つ目の方法を挙げることが出来ました。


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






関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...