HTML

The <iframe> element is a tag that lets you show another page, video, or map inside the current page like a small window, so you can embed external content right where you need it.

iframe 要素

iframe要素は、インラインフレームを作る際に使用します。インラインフレームとは、文書内に別の文書などの閲覧コンテンツを入れ子に配置したもののことです。

iframe 要素の利用例

HTML

<iframe src="child.html"></iframe>

src 属性

インラインフレーム内に表示させたいページのアドレス（URL）を、src属性に指定します。

iframe 要素の概要

iframe 要素を使って、別ページのコンテンツを組み込むことができます。この要素は br 要素や img 要素のような空要素ではありません。必ず終了タグをマークアップしてください。

この要素の開始タグと終了タグのあいだには、「iframe を理解していない古いブラウザ向けのテキストやリンク」を入れておくことができます。ただし、今どきの一般的なブラウザでは、src で指定したコンテンツの読み込みに失敗しても、そのテキストが自動的にエラー表示として使われるわけではありません。あくまで、iframe 要素そのものをサポートしていないブラウザに対してだけ、代わりに表示される可能性がある “おまけのコンテンツ” だと考えておくと分かりやすいです。

なお、XML ドキュメントでは、開始タグと終了タグの中には何も入れてはいけません。

srcdoc 属性

srcdoc 属性は、HTML5 で新たに導入された属性で、フレームに組み込みたいコンテンツを指定します。この属性に指定するコンテンツとは、HTML マークアップそのものです。簡単な HTML コードであれば、別のドキュメントとして用意しなくても、直接、この属性にコンテンツを書き込んで、それをフレーム内に表示することが可能となります。

HTML

<iframe srcdoc="<p>これが<em>フレーム内</em>に表示されることになります。<a href="https://yugien.xyz/">リンク</a>もマークアップ出来ますが、ダブルクォーテーションには注意してください。</p>"></iframe>

srcdoc 属性を使う場合は、この例のようにコンテンツ全体をダブルクォーテーションで囲む書き方がよく使われます。その場合、コンテンツの中でさらにダブルクォーテーションを書きたいときは、&quot; のような文字参照を使う必要があります（あるいは、属性値をシングルクォーテーションで囲んで、内側でダブルクォーテーションを使う書き方もあります）。

もし src 属性と srcdoc 属性の両方が iframe 要素に指定された場合は、srcdoc 属性が優先することになっています。その場合は、src 属性で指定されたアドレスは、srcdoc 属性をサポートしていないブラウザ向けのフォールバックとして機能することになります。

name 属性

name 属性には、フレーム内に表示されるブラウジング・コンテキストの名前を指定します。名前は、半角英数を使って 1文字以上でなければいけません。ただし、名前の最初にアンダーバーを使ってはいけません。

HTML

<iframe src="child.html" name="child"></iframe>

name 属性に指定するブラウジング・コンテキスト名は、主に、a 要素などでリンク先を表示するターゲットに使います。もし、次のようなリンクを用意し、リンクをクリックすると、前述の iframe 要素で生成されたブラウジング・コンテキスト内に、そのリンク先のコンテンツが表示されます。

HTML

<a href="child2.html" target="child">新着情報</a>

sandbox 属性

sandbox 属性は、HTML5 で新たに導入されたコンテンツ属性で、iframe 要素で組み込まれるコンテンツをサンドボックス化して、セキュリティーを強化するために使います。

iframe 要素で組み込むことができるコンテンツは、同じサイトのコンテンツとは限りません。また、同じサイトといっても、自分で作成したコンテンツではない可能性もあります。また、組み込まれるコンテンツが、動的に生成されるコンテンツの場合、事前に、iframe 要素でどんなコンテンツが組み込まれるかわかりません。もし、意図せぬ JavaScript などが組み込まれたら、予期せぬ事態になる恐れがあります。

HTML5 では、このような状況を想定して、ウェブ制作者が意図的に iframe 要素で組み込まれるコンテンツをサンドボックス化して、組み込み元のページに悪影響を及ぼさないようにすることができます。

sandbox 属性がセットされると、その iframe 要素で組み込まれたコンテンツのフォームやスクリプトやプラグインは無効になります。また、リンクのターゲットも無効になります。

sandbox 属性に値を指定しなければ（空文字列を指定すれば）、iframe 要素で組み込まれたコンテンツは、完全にサンドボックス化され、以下の制限が加えられます。

sandbox 属性によって禁止される機能

リンク・ターゲット
自分自身を除く他のブラウジング・コンテキストを扱うことができません。a 要素の target 属性に、他のブラウジング・コンテキスト名を指定しても、それは無効になります。また、JavaScript から window.open() のように新規のブラウジング・コンテキストを生成することもできません。
プラグイン
embed 要素や object 要素などで組み込もうとしたプラグインは無効になります。
同一オリジンに許可された機能
フレーム内のコンテンツは、別のオリジンとして扱われ、同一オリジンであれば利用できた機能が無効になります。主に、スクリプティングにおける制約となります。また、JavaScript の document.cookie も読み取ることができなくなります。
フォーム・サブミット
フレーム内でフォーム・サブミットができなくなります。
スクリプト
フレーム内のスクリプトは全て無効になります。

sandbox 属性には、いくつかのキーワード（値）を指定して、部分的に制限を解除することができます。値を指定する場合は、半角スペースで区切って複数の値を並べられます。ここでは、よく使う代表的なものを 3つ紹介します。

sandbox 属性に指定可能な値

allow-same-origin
親のドキュメントと同じオリジンと見なされ、同一オリジンであれば利用できた機能は利用可能となります。
allow-forms
フォームのサブミットを許可します。
allow-scripts
スクリプトを許可します。

HTML

<iframe sandbox="" src="user-generate-contents.cgi?id=123"></iframe>

この例は、サイトのユーザーが投稿したコンテンツを iframe 要素のフレーム内に表示するシーンを想定したものです。ユーザーが投稿するコンテンツは事前にはわかりません。セキュリティー上、危険なコンテンツが投稿される可能性があります。サーバー側でも、それに対処する必要があるのはもちろんのことですが、ブラウザ側でも、sandbox 属性を指定して制限を加えておくことで、サイトのセキュリティーが強固になります。これによって、万が一、JavaScript やフォームやプラグインがコンテンツに入れられたとしても、それらはすべて無効になります。

HTML

<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="https://bp.example.jp/blog-parts/3"></iframe>

これは、別のサイトが提供するブログ・パーツを、iframe 要素を使って組み込むシーンを想定したものです。3つのキーワードが全てセットされていますが、決して、制限が一切なくなるわけではありません。このフレーム内のリンクでは、自分自身のブラウジング・コンテキスト以外のターゲットが無効になり、プラグインも無効になります。

seamless 属性

seamless 属性は、かつて HTML5 の草案で提案されていた論理属性です。アイデアとしては、iframe 内のコンテンツを「親ページの一部」のように見せて、枠線やスクロールバーなしでシームレスに表示しようというものでした。

ただし、この属性は最終的に仕様から削除されており、主要ブラウザもサポートしていません。現在は新しく使わないことが推奨されているため、「こういう構想があった」という歴史的な情報として押さえておく程度で十分です。

※以下の説明やサンプルコードは、当時の仕様案にもとづく内容です。現在のブラウザではそのとおりには動かない点に注意してください。

これまで、別の HTML ファイルをシームレスにページに組み込んで表示させるためには、SSI ( Server Side Include ) を使って実現してきました。しかし、SSI はサーバー側で用意される仕組みのため、HTML だけで実現することができませんでした。全く同じではありませんが、これを HTML だけで実現しようとしたのが、seamless 属性なのです。

seamless 属性は、スタイルのためだけに存在しているわけではない点に注意してください。リンク・ターゲットの挙動にも影響します。

HTML

<nav><iframe seamless="seamless" src="nav.html"></iframe></nav>

HTML

<!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 属性

width 属性と height 属性には、それぞれ、iframe 要素によってレンダリングされるフレームの横幅と縦幅を指定することができます。

HTML

<iframe src="child.html" width="400" height="50"></iframe>