HTML 5での<iframe>要素。

平成22年 4月 9日公開

テーマ

HTML 5

HTML 4/XHTML 1のストリクト仕様では排除されたものの、HTML 5で再度公認される予定の<iframe>要素について、特に従来の仕様との違いを中心にメモしました。

<iframe>要素とは。

HTML文書等の埋め込みであれば、<object>要素でも可能ですが、<iframe>要素にはフレームとして特化した機能を持たせる事としております。

特に、target属性を用いる事で、埋め込み元の親文書からインラインフレームを操作したりする事も可能になります。

現行のPC向けのグラフィカルな視覚系ブラウザには一通り実装があります。

旧くはネットスケープ 4.xまででは実装されておりませんでした。
インターネットエクスプローラでは3.0から既に実装されておりました。
携帯電話向けのモバイルブラウザには液晶解像度などの制約から実装がない場合が多いようです。

HTML 4/XHTML 1 トランジッショナル/フレームセットでの<iframe>要素。

<iframe>要素はHTML 4/XHTML 1のトランジッショナル仕様またはフレームセット仕様で初めて導入されたものの、同規格のストリクト仕様では導入されておりません。

但し、HTML 4.01仕様書に於いては、<iframe>要素は非推奨としておりません。

HTML 4/XHTML 1 トランジッショナル/フレームセットでの<iframe>要素の定義は以下のようになっておりました。

インライン要素とする
内容モデルは、代替となるもので、ブロックレヴェル要素でも良い
属性については特に必須のものはない

以上より<object>要素同様、<p>要素などに無理矢理ブロックレヴェル要素を埋め込むために用いられる事も考えられましたが、ストリクト仕様での定義がなかったためそのような邪(よこしま)な使い方は殆ど見掛けませんでした。

HTML 4/XHTML 1 トランジッショナル/フレームセットでの<iframe>要素の使用例。

<iframe>要素についてはいろいろな使い方が考えられますが、やはりアクセシビリティなどに配慮した遣い方が望ましいと言えます。

HTML 4/XHTML 1 トランジッショナル/フレームセットでの<iframe>要素の使用例を読み飛ばす

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
    <title>MEGAMIニューズ ～アイドル・二次元キャラクタ・女性声優などの情報～</title>
    …
    </head>

<body>
    <h1>
        MEGAMIニューズ。
        <small class="subTitle">～アイドル・二次元キャラクタ・女性声優など～</small>
        </h1>

    <ul id="NAVI_FOR_CATEGORY">
        <li><a href="/Actresses/">三次元アイドル</a></li>
        <li><a href="/Characters/">二次元キャラクタ</a></li>
        <li><a href="/VoiceActress/">女性声優</a></li>
        </ul>

    <h2 id="APPENDIX_SECTION">本文で出てくるアイドルについて。</h2>
    <ul>
        <li id="APPENDIX_CONTAINER">
            <iframe name="APPENDIX" id="APPENDIX" src="Appendix-Idol.html" width="40%" height="60%">
                本文に出てくるアイドルについては、<a href="Appendix-Idol.html">アイドル名鑑</a>をご覧ください。
                </iframe>
            <li>
        </ul>

    <h2 id="IDOL_XXX_XX_2010">平成22年×月×日のアイドルニューズ。</h2>

    <h3 id="HORKITA_CHALLANGE">堀北真希、□□に挑戦！</h3>
    <p>人気アイドル女優・<a href="Appendix-Idol.html#HORIKITA_MAKI" target="APPENDIX">堀北真希</a>(21)は△日、○○で初の□□に挑戦する事が明らかになった</p>
    …
    </body>
</html>

HTML 4/XHTML 1 トランジッショナル/フレームセットでの<iframe>要素の使用例はここまで

この例で言えば、以下のようになるでしょう。

<iframe>要素に対応している環境。

<iframe>要素の扱い

Appendix-Idol.html で示されるHTML文書が幅が全体の幅の40%、高さが全体の高さの60%となるインラインフレームに埋め込まれるでしょう。

このとき、CSSのポジショニングなどを用いて、常に文書の右側に配置されるようにする事が考えられます。その場合、

<h2 id="APPENDIX_SECTION">本文で出てくるアイドルについて。</h2>

の部分はCSSで非表示にしなければならないでしょう。

尚、<iframe>要素の内容は表示されません。

親文書閲覧時の挙動

親文書中に target="APPENDIX" 属性を与えられた<a>要素に依るアンカーを指定した場合、この属性値と同じ値のname属性を持つ <iframe>要素が文書内にあるため、当該<iframe>要素によるインラインフレーム内の文書がアンカー指定により遷移します。

target="APPENDIX" 属性を与えられた<a>要素に依るアンカーを指定した場合には、親文書自身には何の影響も及ぼさない事に注意してください。
尚、target属性を持つものの文書内に同一値のname属性を与えられた<iframe>要素がない場合には、当該属性値で示されるウィンドウにhref属性で指定された文書を読み込みます。

<iframe>要素に対応していない環境。

<iframe>要素の扱い

本文に出てくるアイドルについては、<a href="Appendix-Idol.html">アイドル名鑑</a>をご覧ください。

が然るべき位置に表示されます。

親文書閲覧時の挙動

親文書中に target="APPENDIX" 属性を与えられた<a>要素に依るアンカーを指定した場合、別ウィンドウや別タブをサポートしていれば、当該名のウィンドウ等を開いてhref属性で指定された文書を読み込みます。

但し、一部に特別な挙動をするtarget属性値もあります。
別ウィンドウや別タブを一切サポートしない場合には、普通に親文書のウィンドウがアンカー指定により遷移するでしょう。

HTML 5での<iframe>要素。

HTML 5では<iframe>要素の機能は大きく変わる事となります。

HTML 5での<iframe>要素の内容モデル。

HTML 5での<iframe>要素の内容モデルは以下のようになります。

在来HTMLとして扱う場合

文書を在来HTML文書として取扱う場合、<iframe>要素の内容は~~<iframe>要素に対応していない環境で適切に利用出来る生テキストのみとなります~~テキストとなります。。

これはHTML 5対応のユーザエージェントの場合、内容テキストのマークアップ~~などは出来ません。従いまして上記のHTML 4/XHTML 1での使用例はHTML 5では不適合になります。~~は生テキストと見なします。<iframe>要素をサポートしない旧式の環境では、いわゆるフォールバックコンテントとして機能するでしょう。

XMLとして扱う場合(XHTML 5)

XMLとして扱う場合、すなわちXHTML 5上では、内容テキストを与える事は出来ません。

これは、DOMの取扱などで問題が生じ得る事に依るものと思われます。

この事より、HTML 5文書を在来HTML文書・XML文書のいずれとしてでも扱えるようにするには、<iframe>要素は常に空とする必要があります。

HTML 5での<iframe>要素の属性。

HTML 5での<iframe>要素の属性は以下のようになります。

従来から定義のある属性

HTML 4/XHTML 1でも定義のあった属性のうち、以下の属性はHTML 5ででも定義されております。

src: 従来と同様、埋め込みたい文書へのURLを指定します。
name: 従来と同様、親文書から当該インラインフレーム内を変化させる際にtarget属性値に用いる名前を指定します。
width: 従来と同様、インラインフレームの幅を指定します。
height: 従来と同様、インラインフレームの高さを指定します。

HTML 5で新たに定義された属性

更にHTML 5では以下の属性が定義されております。

これらの属性は平成22年 4月 9日現在、最新のグーグルクロームが一部実装している程度との事です。

srcdoc: 当該インラインフレームに初期内容として埋め込むHTMLを指定します。
sandbox: 当該インラインフレーム内のスクリプトや埋め込みプラグインなどの動作を制限するための属性です。
seamless: この属性を与えると、親文書に境目無く指定されたHTML文書が埋め込まれます。

以下、詳しく解説しましょう。

srcdoc属性。

HTML 5での<iframe>要素に新たに加えられるsrcdoc属性は、当該インラインフレームの初期表示内容となるHTMLを指定します。

例えば、以下のように記述されているとします。

<iframe name="APPENDIX" width="60%" height="60%" srcdoc="&lt;p&gt;本文内の用語についての説明は、&lt;em&gt;こちらに&lt;/em&gt;表示されます。&lt;/p&gt;"></iframe>

このとき、当該インラインフレームの初期状態は、以下のHTML文書となります。

<p>本文内の用語についての説明は、<em>こちらに</em>表示されます。</p>

言うまでもありませんが、属性値にタグなど特別な意味を持つ記号を含む場合には、文字参照化しなければなりません(特にXML文書としても取り扱いたい場合)。

勿論、この表示は後刻親文書からの当該インラインフレーム操作に依り別のものに変わり得ます(srcdoc属性はあくまで初期値として用いる事となります)。

尚、src属性と併用した場合、HTML 5に対応した環境であればsrcdoc属性が優先されます。しかし、HTML 5未対応の環境ではsrcdoc属性は無効になるため、必要ならsrc属性も併記して初めに埋め込ませたいHTML文書類を指定しておくと良いでしょう。

sandbox属性。

HTML 5での<iframe>要素に新たに加えられるsandbox属性は、当該インラインフレーム内での機能の制限を指定します。

これに依り、安全性が向上すると言う訳です。

属性値が空文字列となっているsandbox属性が与えられている場合、以下の制約が課されます。

当該インラインフレームにある文書への親文書からの操作を禁じます。
当該インラインフレームにある文書内でのプラグインの起動を禁じます。
当該インラインフレームにある文書内の<iframe>要素にseamless属性があっても無効にします。
当該インラインフレームにある文書内から他の文書へのリンクが無効になります。更にクッキーなどのローカルリソースへのアクセスも出来なくなります。
当該インラインフレームにある文書内のフォームからの送信は無効になります。
当該インラインフレームにある文書上でのクライアントサイドスクリプトの動作は禁止されます。

sandbox属性の値は、これらの制約のうち、後半の三つを課さないための値となります。

具体的には以下の値を空白類で区切って指定します。

allow-same-origin: 当該インラインフレーム内の文書を親文書と同じオリジンにする事で、当該インラインフレームから他の文書へのリンクやローカルリソースへのアクセスを許可します。
allow-forms: 当該インラインフレーム内の文書にあるフォームからの送信を有効にします。
allow-scripts: 当該インラインフレーム内の文書上でクライアントサイドスクリプトの動作が許可されます。

尚、DOM操作でsandbox属性値の変更やsandbox属性属性そのものの削除するなどしても、インラインフレームへの埋め込みの際には影響しないものとしております。

また、sandbox属性を与えられた場合の制約のうち、初めの三つは変更は出来ません。

尚、インラインフレームに埋め込まれるべき文書をインラインフレームを経ずに直接開いた場合に同様に安全性を確保すべく、新たなMIMEタイプ・text/html-sandboxedも定義されております。

このMIMEタイプで配信されたHTML文書は、インラインフレームに埋め込まない限りはHTML文書としてレンダリングをしない事としております。

この点については従来のウェブブラウザにとってtext/html-sandboxedは未知のMIMEタイプなので問題なく対応されます(種別不明のファイルとしてダウンロードするか否かを問うて来る筈です)。

つまり、安全性の確保としては

埋め込み元のHTML文書では<iframe sandbox="">要素で埋め込み、
埋め込むHTML文書はMIMEタイプをtext/html-sandboxedとして配信する

事が必要になります。

seamless属性。

HTML 5での<iframe>要素に新たに加えられるseamless属性は、当該インラインフレームを親文書に境目無く埋め込むように指定します。

つまり、seamless属性を与えられた場合には、あたかも元の文書内のコンテンツであるかのように埋め込む事となります。

この属性はXML文書として扱えるようにするためには seamless="seamless" と記述します。

但し、sandbox属性を与えられたインラインフレーム内ではこの動作をしない事としております。

つまり、sandbox属性を与えられたインラインフレーム内については、seamless属性を与えられた場合であっても、それを無視して明確に別のリソースであるように取扱う事となります。

HTML 5での<iframe>要素の実例。

HTML 5では<iframe>要素の内容モデルなどが大幅に変更されたため、従来の仕様に則った実例は適切でない場合があります。

以下に例を挙げておきましょう。

今回は、単に<iframe>要素の使い方だけでなく、HTML 5のマークアップ作法に則ったマークアップとしております。

HTML 5での<iframe>要素の実例を読み飛ばす

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
    <meta charset="shift_jis" />
    <title>MEGAMIニューズ ～アイドル・二次元キャラクタ・女性声優などの情報～</title>
    …
    </head>

<body>
    <hgroup>
        <h1>MEGAMIニューズ。</h1>
        <h2>～アイドル・二次元キャラクタ・女性声優など～</h2>
        </hgroup>

    <nav id="NAVI_FOR_CATEGORY">
        <ul>
            <li><a href="/Actresses/">三次元アイドル</a></li>
            <li><a href="/Characters/">二次元キャラクタ</a></li>
            <li><a href="/VoiceActress/">女性声優</a></li>
            </ul>
        </nav>

    <figure>
        <iframe name="APPENDIX" id="APPENDIX" srcdoc="&lt;p&gt;本文中のキャラクタ等の解説はこちらに表示されます&lt;/p&gt;" src="Appendix-Idol.html" width="40%" height="60%"></iframe>
        </figure>

    <section>
        <h2 id="IDOL_XXX_XX_2010">平成22年×月×日のアイドルニューズ。</h2>

        <article>
            <h3 id="HORKITA_CHALLANGE">堀北真希、□□に挑戦！</h3>
            <p>人気アイドル女優・<a href="Appendix-Idol.html#HORIKITA_MAKI" target="APPENDIX">堀北真希</a>(21)は△日、○○で初の□□に挑戦する事が明らかになった</p>
    …
            </article>
    …
        </section>
    </body>
</html>

今回は複数の記事(<article>要素)を一本の文書にまとめたものを想定しているので、<h1>要素を含むセクションは<article>要素とせず、<body>要素直下としました。

HTML 5での<iframe>要素の実例はここまで

この例では、埋め込み時に以下のような処理が成されるでしょう。

HTML 5に対応している環境

<p>本文中のキャラクタ等の解説はこちらに表示されます</p>

と言うHTMLからなる文書が埋め込まれたインラインフレームが表示されます。

HTML 5に非対応であるものの<iframe>要素には対応している環境

Appendix-Idol.html と言う相対URLで示される文書を埋め込ｍだインラインフレームが表示されます。

<iframe>要素に対応していない環境

インラインフレームは表示されません。

代替コンテンツもないため、該当する<iframe>要素に関しては何も表示されません。

そして、インラインフレームが表示されていれば、target="APPENDIX"属性を与えられた<a>要素からのリンクで当該フレームの内容が操作される事になります。

制作者の個人的な感想。

HTML 5では<iframe>要素に関してセキュリティへの対策が練られておりますが、従来の使い方が全く出来なくなると言う訳ではありません。

但し、内容モデルが大きく変わるので、既に<iframe>要素を用いている文書をHTML 5に転換させる事を検討している方は注意が必要でしょう。