iframe 要素

概要

HTML の <iframe> 要素 (またはHTML インラインフレーム要素) は、ブラウジングコンテキスト (browsing context) の入れ子を表現し、事実上現在のページに他の HTML ページを埋め込むことができます。HTML 4.01 では、文書は head および body、または head および frame-set を持つことができ、body と frame-set の両方は持ちません。しかし、<iframe> は通常の文書 body 内で使用できます。ブラウジングコンテキストはそれぞれ、セッション履歴とアクティブな文書を持ちます。埋め込みコンテンツを含む側のブラウジングコンテキストを、親ブラウジングコンテキストと呼びます。トップレベルのブラウジングコンテキスト（親を持ちません）は通常ブラウザウィンドウです。

• コンテンツカテゴリ フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ、インタラクティブコンテンツ、パルパブルコンテンツ
• 許可された内容 特殊。本文をご覧ください
• タグの省略 不可。開始と終了タグの両方が必要。
• 許可された親要素 埋め込みコンテンツを受け入れる全要素
• DOM インタフェース HTMLIFrameElement

属性

この要素はグローバル属性を持ちます。

align 非推奨 HTML4.01 廃止 HTML5

フレームを含むコンテキストに対する、フレームの整列方法を指定します。

allowfullscreen

element.mozRequestFullScreen() を呼び出してフルスクリーンモードにできれば、この属性が true にセットされます。セットされていなければ、要素はフルスクリーンモードにできません。

frameborder HTML 4 のみ

値が 1 (デフォルト) なら、ブラウザはこのフレームと他のすべてのフレームの間にボーダーを描きます。値が 0 なら、他フレームとの間にボーダーは描かれません。

height

フレームの高さをHTML5CSS ピクセル、またはHTML 4.01ピクセルかパーセンテージで示します。

longdesc HTML 4 のみ

フレームの長い説明の URI です。 広まっている誤用のせいで、非視覚ブラウザでは有益ではありません。

marginheight HTML 4 のみ

フレームのコンテンツと top および bottom のマージン間の、ピクセル単位の余白量です。

marginwidth HTML 4 のみ

フレームのコンテンツと left および right のマージン間の、ピクセル単位の余白量です。

mozallowfullscreen

代わりに allowfullscreen を使ってください。Gecko 9.0 以降では、フレームがelement.mozRequestFullScreen() メソッドを呼び出してフルスクリーンモードにできるなら true にセットできます。セットされていなければ、その要素はフルスクリーンモードにできません。

webkitallowfullscreen

代わりに allowfullscreen を使ってください。Chrome 17 以降 (それ以前でもおそらく) では、フレームが element.webkitRequestFullScreen() メソッドを呼び出してフルスクリーンモードにできるなら true にセットできます。セットされていなければ、その要素はフルスクリーンモードにできません。

mozapp Only available on Firefox OS

open web app をホストするフレームで app manifest の URL を定義します。これは app が正しい権限を持って読み込まれることを保証します。詳細は Using the Browser API をご覧ください。Gecko 13.0 以降で利用可能です。

mozbrowser Only available on Firefox OS

フレームが、トップレベルの閲覧ウィンドウであるように埋め込みコンテンツに現れることを示します。つまり、window.top, window.parent, window.frameElement などがフレームの階層構造を反映しないということです。これにより、正しい権限でもって完全にウェブ技術だけでウェブブラウザの UI を実装することができます。詳細は Using the Browser API をご覧ください。Gecko 13.0 以降で利用可能です。

name

埋め込みのブラウジングコンテキスト（またはフレーム）の名前です。<a> や <form> 要素の target 属性の値、もしくは <input> や <button> 要素の formtarget 属性の値として使えます。

remote Only available on Firefox OS

別のコンテンツプロセスでフレームのページを読み込みます。

scrolling HTML 4 のみ

フレームにスクロールバー（もしくは他のスクロール用機能）をいつ表示するか決めるための列挙属性です:

• auto: 必要なときだけ表示
• yes: 常にスクロールバーを表示
• no: スクロールバーを一切表示しない

sandbox HTML5 のみ

空文字列として定義されると、インラインフレームに表示できるコンテンツに最大限の制限をかけることができます。もしくは特定の制限を取り除くトークンを空白区切りで与えることができます。以下は有効なトークンです:

• allow-same-origin: コンテンツが通常のオリジンを持つとみなします。このキーワードが使われない場合はと、埋め込みコンテンツは独自オリジンを持つとみなされます。
• allow-top-navigation: 埋め込みのブラウジングコンテキストがトップレベルのブラウジングコンテキストのコンテンツを操作（読み込み）することを許可します。このキーワードが使われない場合はこの操作は行えません。
• allow-forms: 埋め込みのブラウジングコンテキストにフォームの実行を許可します。このキーワードが使われない場合はこの操作は行えません。
• allow-scripts: 埋め込みのブラウジングコンテキストにスクリプトの実行を許可します（ただしポップアップウィンドウは作れません）。このキーワードが使われない場合はこの操作は行えません。

註:

• 埋め込み文書がメインページと同一オリジンを持つ場合、allow-scripts と allow-same-origin の同時使用は、埋め込み文書がプログラムから sandbox 属性を削除することができるようになるため、用いるべきではありません。容認されているとはいえ、sandbox 属性を使わないのと同様に安全ではありません。
• サンドボックス化は一般に、攻撃者が潜在的な攻撃力を持つコンテンツを、ユーザブラウザのサンドボックス化した iframe の外に表示するような準備ができるなら、最小限の助けにしかなりません。潜在的なダメージを抑えるため、そうしたコンテンツは別の専用ドメインから提供することが推奨されます。
• sandbox 属性は Internet Explorer 9 以前と Opera でサポートされていません。

seamless HTML5 のみ

ブラウザがインラインフレームを、それを含む文書の一部であるかのように表示させることを示す真偽値属性です。例えばインラインフレームを含む文書に対して、その文書で指定されるスタイルより先に <iframe> に適用される CSS スタイルを適用したり、含まれている文書のリンクを親のブラウジングコンテキストで開いたりします (他の設定で回避しない場合)。XHTML では属性の最小化が禁止されており、seamless 属性は <iframe seamless="seamless"> として定義しなければなりません。

src

埋め込むページの URL。

srcdoc HTML5 のみ

埋め込みコンテキストを含めるページのコンテンツ。この属性は、sandbox および seamless 属性とともに使用すると想定されています。ブラウザが srcdoc 属性をサポートする場合は、src 属性で指定したコンテンツより優先します。ブラウザが srcdoc 属性をサポートしない場合は、src 属性でファイルを指定していれば、それを代わりに表示します。

width

フレームの幅をHTML5 CSS ピクセル、またはHTML 4.01ピクセルかパーセンテージで示します。

スクリプト操作

<frame> 要素のようなインラインフレームは window.frames 擬似配列に入ります。

スクリプトは DOM の iframe 要素から contentWindow プロパティを使って、それを含む HTML ページの window オブジェクトにアクセスできます。contentDocument プロパティは iframe の内側の document 要素を参照します (contentWindow.document と等価です)。これは Internet Explorer の IE8 以前のバージョンではサポートされていません。

スクリプトは、フレームの内側からは window.parent を使って親ウィンドウを参照できます。

フレームの内容にアクセスしようとするスクリプトは同一オリジンポリシーに従います。別のドメインから読み込まれたスクリプトは他の window オブジェクトのほとんどのプロパティにアクセスできません。これは、親ウィンドウにアクセスしようとするフレーム内のスクリプトにも当てはまります。ドメイン間のやりとりは依然として window.postMessage で行えます。

例 1

<script type="text/javascript">
  var iframe = window.getElementsByTagName( "iframe" )[ 0 ];
  alert( "Frame title: " + iframe.contentWindow.title );
</script>


<iframe src="page.html" width="300" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

例 2: iframe 内のリンクを別のタブで開く

<base target="_blank" />
<iframe width="400" height="215" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
   src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed">
</iframe><br />
<small>
    <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593"
       style="color:#0000FF;text-align:left">
        See bigger map
    </a>
</small>

表示結果

Live example

注記

仕様

ブラウザ実装状況