<iframe>要素(埋め込みインラインフレーム)。

HTML文書に埋め込まれるインラインフレームである<iframe>要素についての解説です。

<iframe>要素(埋め込みインラインフレーム)・目次。

▲記事先頭
▽次項目

<iframe>要素とは
<iframe>要素を利用出来るHTML文書型
<iframe>要素が含まれるXHTML モジュール
<iframe>要素の実装上の注意
<iframe>要素の扱い
<iframe>要素の属性
<iframe>要素に関する注意事項
- <object>要素との違い
<iframe>要素の記述例
関連項目

<iframe>要素とは。

▲記事先頭
△前項目
▽次項目

インラインフレームとは、インラインで別文書を埋め込むためのフレームです。

ウィンドウ全体を分割する事無く埋め込む事が出来ます。

但し排除勧告は出ておりません。

<iframe>要素が含まれるXHTML モジュール。

▲記事先頭
△前項目
▽次項目

平成20年10月 7日まではレガシィ(旧式)モジュールでした。

<iframe>要素の実装上の注意。

▲記事先頭
△前項目
▽次項目

ネットスケープ 4.x以前などの旧式ユーザエージェントでは<iframe>要素を実装していないものがあります。
実装している環境でも、横幅と高さを指定しないと表示されない場合があります。

<iframe>要素の扱い。

▲記事先頭
△前項目
▽次項目

内容としては、当該インラインフレームが表示出来ない環境向けの代替コンテンツとなります。

<iframe>要素の属性。

▲記事先頭
△前項目
▽次項目

<iframe>要素の属性一覧を読み飛ばす

コア属性

name属性

当該インラインフレームのフレーム名を指定します。target属性での操作対象となります。

実際にはid属性にも同じ値を指定しておく事が求められます。

src属性

当該インラインフレームに埋め込む文書のURIを指定します。

埋め込み元のHTML文書へのURIを指定した場合、ユーザエージェントがどのような挙動を取るべきかは仕様では定義しておりません。くれぐれも自分自身を埋め込まないようにして下さい。

width属性

height属性

それぞれ、インラインフレームの横幅と高さを、

ピクセル数(単位なし)
または画面に高さまたは幅に対するパーセンテージ(%単位)

で指定します。

longdesc属性

フレームの内容に関する説明文へのURIを指定します。非視覚系ユーザエージェントなどフレーム全体を見渡すのが困難な環境では有用な情報となります。

frameborder属性

当該フレームの枠を表示させるかどうかを指定します。

値は 0(枠非表示)か 1(枠表示)のいずれかとなります。

デフォルトは 1(枠表示)です。
尚、 0(枠非表示)に設定していても、接するフレームが枠表示を指定している場合は枠は表示されます。

marginwidth属性

フレーム内の左右の余白をピクセル単位で指定します。

marginheight

フレーム内の上下の余白をピクセル単位で指定します。

align属性

当該インラインフレームの配置を指定します。

値には以下の五つがあります。

left: 左に寄せます。後続するテキスト類は、右に廻り込みます。
right: 右に寄せます。後続するテキスト類は、左に廻り込みます。
middle: インラインフレームの上下方向の中央をテキストのベースラインに合わせます。
top: 上端をテキストのベースラインに合わせます。
bottom: 下端をテキストのベースラインに合わせます。

尚、align="lift"属性及びalign="right"属性が与えられた<iframe>要素以降のテキストの廻り込みを解除するには<br>要素のclear属性を用います。

<iframe>要素に関する注意事項。

<object>要素との違い。

▲記事先頭
△前項目
▽次項目

この場合、type属性をHTML文書のMIMEタイプにします。つまり、type="text/html"属性を当該<object>要素に附与します。
但しネットスケープ 4.x以前などの旧式ユーザエージェントではHTML文書を埋め込む事は出来ません。

しかし、<iframe>要素は<object>要素と違って、target属性でインラインフレーム外から、或いはインラインフレーム内からページの切替が可能です。

<object>要素で埋め込んだHTML文書から元のHTML文書の表示されているウィンドウを操作する事は出来ません。ファイヤーフォックスなどで埋め込まれた文書内にあるtarget="_TOP"属性を与えた<a>要素の指定で文書全体が変わるのは恐らくバグか手抜きでしょう。

尚、どちらの要素で埋め込む場合であっても、埋め込まれた文書に於ける相対パスは、その文書自身のURI基準となります。決して、埋め込み先文書のURI基準にはなりません。

<iframe>要素の記述例。

▲記事先頭
△前項目
▽次項目

状況としては、XHTML 1.0 トランジッショナル文書内に用語集を埋め込んでいると仮定しております。

<dl class="glossary">
    <dt>専門用語について</dl>
    <dd>
        <iframe name="GLOSSARY" id="GLOSSARY" src="../Resorces/Glossary.html" width="30%" height="70%">
            本文書で用いられている専門用語は、<a rel="appendix glossary" href="../Resorces/Glossary.html">用語集</a>をご覧下さい。
            </iframe>
        </dd>
    </dl>

インラインフレームに対応している環境なら、../Resorces/Glossary.html で示されるURIに在る用語集を埋め込んで表示させるでしょう。

一方、インラインフレームに対応していない環境では、代替テキストとして、本文書で用いられている専門用語は、用語集をご覧下さい。 と表示され、特に用語集の箇所が本来埋め込まれるべきであった用語集へのアンカーとなります。

この場合、文書のメイン部分でも当該用語集へのアンカーを使う事になるでしょう。その場合、当該<a>要素(href="../Resorces/Glossary.html#○○"属性を持つもの)には target="GLOSSARY" 属性(値に当該<iframe>要素のname属性値を与えたtarget属性)も与えておく事で、当該インラインフレームの表示を替えられるようになります(インラインフレームに対応しない環境では別ウィンドウまたは当該ウィンドウに指定された文書が表示されるでしょう)。