iframe要素

今回はiframe要素を紹介します。iframe要素とは、新しいブラウジングコンテキストを作り文書中に配置するものです。

分かりにくい言い方ですが、あるページの中に、別のページを表示する枠のようなものを置くということです。

このような概念はフレームと呼ばれます。iframe要素で作られるフレームはインラインフレームと呼ばれます。

基本的な使い方

まず、src属性で、このブラウジングコンテキストに入れるページのアドレスを指定します。

例えば、<iframe src="http://google.com/"></iframe>のようにした場合、次のようになります。

枠ができてGoogleが表示されたと思います。

また、width属性・height属性があり、これによりインラインフレームの大きさを指定できます。

さらにname属性があり、これがブラウジングコンテキスト名です。前回target属性を紹介しましたが、ここでこの名前を指定すると、そのフレームの中身が変わります。

例えば、Yahoo!このリンクをクリックしてみましょう。target属性をさっきのフレームの名前にしているので、フレームが変わると思います。

srcdoc属性

さらに、特徴的な属性として、srcdoc属性があります。これは、中に表示されるページをURLで指定するのではなく、HTMLで直接書いて指定します。つまり、こういうことです。


<iframe srcdoc="<!doctype html>
<html><head><title>test</title></head>
<body><p>test</p></body></html>"></iframe>

という感じです。これを実際に試すとこうなります：（現在()まだ対応しているブラウザは無いようです）

このように、属性中に改行を入れることもできます。例えば、title属性も、属性中に改行がある場合それを無視されずに読み込まれます。

また、DOCTYTPE宣言は省略してもよいことになっています。

ちなみに、iframe要素は特に中に何も入れる必要はないように思われますが、空要素ではありません。

といっても、実際何も入れる必要はありません。ただ、終了タグ</iframe>は忘れないようにしましょう。

さて、次にseemless属性を紹介します。これは論理属性で、この属性があるとiframe要素で表示されている文書が親の文書（iframe要素がある文書）と同化します。つまり、境目が無いような感じで表示されます。また、iframe内でリンクを移動した際、通常はiframe内だけ変化するのが、親の文書ごと変化したりするなどの違いもあります。

これを利用して、srcdoc属性とseemless属性を組み合わせることで、iframeのsrcdoc属性に書いたHTMLを文書に直接書かれているかのように表示することができます。

それならiframeなんか使わずに普通に書けと思うかもしれませんが、実はiframe属性を使うメリットがあります。

sandbox属性

そこで登場するのがsandbox属性です。この属性があると、そのインラインフレームをサンドボックス化することができます。

サンドボックス化されたiframeの中では、フォームやスクリプト（主にJavaScript）が無効化され、さらに同じドメインの場合でも異なるドメインのページとして扱われます。異なるドメインだとどうなるかというと、JavaScriptなどで干渉できなくなります。

ただ、sandbox属性の中身によって制限をゆるくすることができます。いくつかの値をスペースで区切ることで、その値が適用されます。

allow-same-origin
同じドメインのページは同じドメインとして扱うようにする。
allow-forms
フォームを有効にします。
allow-scripts
スクリプトを有効にします。

つまり、sandbox=""という状態が一番厳しい状態ということになります。

それで、このsandbox属性の使い道ですが、前述のsrcdoc属性,seemless属性と組み合わせて使うことができます。つまり、掲示板あるいはチャットなどで、変な内容を書かれたらスクリプトなどが動いたりして（いわゆるXSS）困るかもしれません。

そんなとき、このiframe要素を使ってしまえばスクリプト無効で安全です。

しかし、掲示板の書き込み程度でいちいちsrcdoc属性の中に<html>…</html>を書くのは面倒ですね。実は、タグというのは省略できるものが多いので、これはだいぶ簡潔になります。次回、省略について解説します。

iframe要素

要素の種類

フレージング・コンテンツ。

インタラクティブ・コンテンツ。

埋め込みコンテンツ。

子

古いブラウザ用のテキスト。

意味

埋め込まれたブラウジングコンテキスト。

属性

name
ブラウジングコンテキストの名前。
src
表示するページのURL。
srcdoc
表示する文書。
sandbox
サンドボックス化と緩和する条件。
seamless
論理属性。親のページと同化するかどうか
width
幅。
height
高さ。