HyperText Markup Language iframe element.
iframe 要素は、インラインフレームを作る際に使用します。インラインフレームとは、文書内に別の文書などの閲覧コンテンツを入れ子に配置したもののことです。
<iframe src="child.html"></iframe>
インラインフレーム内に表示させたいページのアドレス（ URL ）を、src コンテンツ属性に指定します。
| カテゴリー |
フロー・コンテンツ フレージング・コンテンツ エンベディッド・コンテンツ インタラクティブ・コンテンツ |
|---|---|
| コンテンツ･モデル | テキスト |
| 利用可能な場所 | エンベディッド・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 |
src （フレームのブラウジング・コンテキストに表示したいページのアドレス） srcdoc （フレームのブラウジング・コンテキストに表示したいコンテンツ） name （ブラウジング・コンテキストの名前） sandbox (フレーム内のコンテンツに制限を加える) seamless (あたかも親ページのコンテンツであるかのように、フレーム内のコンテンツをシームレスにレンダリング表示する) width (フレームの横幅をCSSピクセルで指定する) height (フレームの縦幅をCSSピクセルで指定する) |
| 標準的なスタイル |
iframe {
|
iframe 要素を使って、別ページのコンテンツを組み込むことができます。この要素は br 要素や img 要素のような空要素ではありません。必ず終了タグをマークアップしてください。
この要素は、開始タグと終了タグの中にはテキストしか入れてはいけません。しかし、仮にテキストを入れたとしても、それは、src コンテンツ属性で指定されたコンテンツの読み込みに失敗した場合のフォールバック・コンテンツとして扱われることはありませんので、注意してください（ただし、iframe 要素をサポートしていないブラウザに対しては、フォールバック・コンテンツとして機能するかもしれません）。
なお、XML ドキュメントでは、開始タグと終了タグの中には何も入れてはいけません。
srcdoc コンテンツ属性は、HTML5 で新たに導入されたコンテンツ属性で、フレームに組み込みたいコンテンツを指定します。このコンテンツ属性に指定するコンテンツとは、HTML マークアップそのものです。簡単な HTML コードであれば、別のドキュメントとして用意しなくても、直接、このコンテンツ属性にコンテンツを書き込んで、それをフレーム内に表示することが可能となります。
<iframe srcdoc="<p>これが<em>フレーム内</em>に表示されることになります。<a href="https://www.yugien.xyz/">リンク</a>もマークアップ出来ますが、ダブルクォーテーションには注意してください。</p>"></iframe>
srcdoc コンテンツ属性を使う場合は、そのコンテンツをダブルクォーテーションで囲まなければいけません。また、そのコンテンツの中ではダブルクォーテーションを使うことができませんので、" を使わなければいけない点に注意してください。
もし src コンテンツ属性と srcdoc コンテンツ属性の両方が iframe 要素に指定された場合は、srcdoc コンテンツ属性が優先することになっています。その場合は、src コンテンツ属性で指定されたアドレスは、srcdoc コンテンツ属性をサポートしていないブラウザ向けのフォールバックとして機能することになります。
name コンテンツ属性には、フレーム内に表示されるブラウジング・コンテキストの名前を指定します。名前は、半角英数を使って 1文字以上でなければいけません。ただし、名前の最初にアンダーバーを使ってはいけません。
<iframe src="child.html" name="child"></iframe>
name コンテンツ属性に指定するブラウジング・コンテキスト名は、主に、a 要素などでリンク先を表示するターゲットに使います。もし、次のようなリンクを用意し、リンクをクリックすると、前述の iframe 要素で生成されたブラウジング・コンテキスト内に、そのリンク先のコンテンツが表示されます。
<a href="child2.html" target="child">新着情報</a>
sandbox コンテンツ属性は、HTML5 で新たに導入されたコンテンツ属性で、iframe 要素で組み込まれるコンテンツをサンドボックス化して、セキュリティーを強化するために使います。
iframe 要素で組み込むことができるコンテンツは、同じサイトのコンテンツとは限りません。また、同じサイトといっても、自分で作成したコンテンツではない可能性もあります。また、組み込まれるコンテンツが、動的に生成されるコンテンツの場合、事前に、iframe 要素でどんなコンテンツが組み込まれるかわかりません。もし、意図せぬ JavaScript などが組み込まれたら、予期せぬ事態になる恐れがあります。
HTML5 では、このような状況を想定して、ウェブ制作者が意図的に iframe 要素で組み込まれるコンテンツをサンドボックス化して、組み込み元のページに悪影響を及ぼさないようにすることができます。
sandbox コンテンツ属性がセットされると、その iframe 要素で組み込まれたコンテンツのフォームやスクリプトやプラグインは無効になります。また、リンクのターゲットも無効になります。
sandbox コンテンツ属性に値を指定しなければ（空文字列を指定すれば）、iframe 要素で組み込まれたコンテンツは、完全にサンドボックス化され、以下の制限が加えられます。
| 禁止される機能 | 説明 |
|---|---|
| リンク・ターゲット | 自分自身を除く他のブラウジング・コンテキストを扱うことができません。a 要素の target コンテンツ属性に、他のブラウジング・コンテキスト名を指定しても、それは無効になります。また、JavaScript から |
| プラグイン | embed 要素や object 要素などで組み込もうとしたプラグインは無効になります。 |
| 同一オリジンに許可された機能 | フレーム内のコンテンツは、別のオリジンとして扱われ、同一オリジンであれば利用できた機能が無効になります。主に、スクリプティングにおける制約となります。また、JavaScript の |
| フォーム・サブミット | フレーム内でフォーム・サブミットができなくなります。 |
| スクリプト | フレーム内のスクリプトは全て無効になります。 |
sandbox コンテンツ属性に、以下の 3つのいずれかの値を指定することで、部分的に制限を解除することができます。値を指定する場合、半角スペースで区切って 2つ以上の値を指定することも可能です。
| 指定可能な値 | 説明 |
|---|---|
| allow-same-origin | 親のドキュメントと同じオリジンと見なされ、同一オリジンであれば利用できた機能は利用可能となります。 |
| allow-forms | フォームのサブミットを許可します。 |
| allow-scripts | スクリプトを許可します。 |
<iframe sandbox="" src="user-generate-contents.cgi?id=123"></iframe>
この例は、サイトのユーザーが投稿したコンテンツを iframe 要素のフレーム内に表示するシーンを想定したものです。ユーザーが投稿するコンテンツは事前にはわかりません。セキュリティー上、危険なコンテンツが投稿される可能性があります。サーバー側でも、それに対処する必要があるのはもちろんのことですが、ブラウザ側でも、sandbox コンテンツ属性を指定して制限を加えておくことで、サイトのセキュリティーが強固になります。これによって、万が一、JavaScript やフォームやプラグインがコンテンツに入れられたとしても、それらはすべて無効になります。
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://bp.example.jp/blog-parts/3"></iframe>
これは、別のサイトが提供するブログ・パーツを、iframe 要素を使って組み込むシーンを想定したものです。3つのキーワードが全てセットされていますが、決して、制限が一切なくなるわけではありません。このフレーム内のリンクでは、自分自身のブラウジング・コンテキスト以外のターゲットが無効になり、プラグインも無効になります。
seamless コンテンツ属性は、HTML5 で新たに導入された論理属性です。このコンテンツ属性がセットされた iframe 要素から読み込まれたコンテンツは、あたかも、親のブラウジング・コンテキストの中に始めからマークアップされていたかのように扱われます。そして、フレームの境界線が引かれることなく、シームレスにレンダリングされることになっています。
これまで、別の HTML ファイルをシームレスにページに組み込んで表示させるためには、SSI ( Server Side Include ) を使って実現してきました。しかし、SSI はサーバー側で用意される仕組みのため、HTML だけで実現することができませんでした。全く同じではありませんが、これを HTML だけで実現しようとしたのが、seamless コンテンツ属性なのです。
seamless コンテンツ属性は、スタイルのためだけに存在しているわけではない点に注意してください。リンク・ターゲットの挙動にも影響します。
<nav><iframe seamless="seamless" src="nav.html"></iframe></nav>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>グローバル・ナビゲーション</title>
</head>
<body>
<ul>
<li><a href="/index.html">ホーム</a></li>
<li><a href="/products.html">商品一覧</a></li>
<li><a href="/cart.cgi">ショッピング・カート</a></li>
</ul>
</body>
</html>
2013年7月6日時点では、最新版の Chrome と Opera は、対応しているようです。
この例は、サイト内の全ページで共通のグローバル・ナビゲーションを、iframe 要素で組み込み表示しているのを想定しています。
nav.html の a 要素に注目してください。これら a 要素には target コンテンツ属性が指定されていません。HTML5 に対応していないブラウザであれば、リンクをクリックすると、フレーム内に指定のページが表示されてしまいます。しかし、seamless コンテンツ属性に対応したブラウザであれば、あたかも a 要素に target="_parent" がセットされていたかのように振る舞うことが期待されています。
また、スタイルシートの扱いも変わってきます。seamless コンテンツ属性がセットされた iframe 要素でも、フレーム内のコンテンツが、親のドキュメントのスタイルを継承することになっています。つまり、あたかも、フレーム内のコンテンツが、親のドキュメントに始めからマークアップされていたのと同じようにスタイルが適用されることが期待されています。
width コンテンツ属性と height コンテンツ属性には、それぞれ、iframe 要素によってレンダリングされるフレームの横幅と縦幅を指定することができます。
<iframe src="child.html" width="400" height="50"></iframe>