HTML インラインフレーム要素 (<iframe>)は、入れ子になった閲覧コンテキスト (browsing context) を表現し、効果的に現在のページに他の HTML ページを埋め込むことができます。 文書内に任意の数の <iframe> 要素を含めることができ、ページの <body> の中に他の文書を埋め込むことができます。

それぞれの閲覧コンテキストは、セッションの履歴とアクティブな文書を持ちます。埋め込みコンテンツを含む側の閲覧コンテキストを、閲覧コンテキストと呼びます。最上位の閲覧コンテキストは (親を持たないもの) は、通常 Window オブジェクトで表されるブラウザーのウィンドウです。

<iframe> で作成されるそれぞれの埋め込み閲覧コンテキストは、それ自身が完結した文書環境であるため、ページの中で <iframe> を使用するごとに、文書全体で必要とするメモリやその他の計算リソースが相当な量増加するので、理論的にはページ内に好きなだけ <iframes> を使用することができますが、パフォーマンスの問題が発生する可能性があることを意識しておいてください。

コンテンツカテゴリー フローコンテンツ記述コンテンツ、埋め込みコンテンツ、対話型コンテンツ、知覚可能コンテンツ
許可されている内容 フォールバックコンテンツ。つまり、普段は描画されないが、 <iframe> 要素に対応していないブラウザーでは描画されるコンテンツです。
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 埋め込みコンテンツを受け入れるすべての要素。
許可されている ARIA ロール application, document, img
DOM インターフェイス HTMLIFrameElement

属性

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

allowfullscreen
requestFullscreen() を呼び出して全画面モードにすることを許可する場合は、この属性を true に設定します。設定されていなければ、この要素を全画面モードにすることはできません。
allowpaymentrequest
オリジンをまたいだ <iframe>Payment Request API の実行を許可する場合に、この属性を true に設定します。
height
フレームの高さを CSS ピクセルで示します。 HTML 5 よりも前では、この値は物理ピクセル又はパーセント値で示していました。パーセント値は許可されなくなりました
name
埋め込みの閲覧コンテキスト(またはフレーム)の名前です。<a><form> 要素の target 属性の値、もしくは <input><button> 要素の formtarget 属性の値として使えます。
referrerpolicy
リソースを読み込む際にどのリファラーを使用するかを示す文字列です。
  • "no-referrer" は、 Referer ヘッダーを送信しないことを表します。
  • "no-referrer-when-downgrade" は、 TLS (HTTPS) を使用せずにオリジンへナビゲートする場合は Referer: ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントのデフォルトの動作です。
  • "origin" は、ページのオリジン (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。
  • "origin-when-cross-origin" は、異なるオリジンへのナビゲートではリファラーをスキーム、ホスト、ポートに制限します。同一オリジンへのナビゲートでは、リファラーのパスも含めます。
  • "unsafe-url" は、リファラーにオリジンとパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでないオリジンへ漏えいしますので、安全ではありません。
sandbox HTML5 のみ
空文字列として定義されると、インラインフレームに表示できるコンテンツに最大限の制限をかけることができます。もしくは特定の制限を取り除くトークンを空白区切りで与えることができます。以下は有効なトークンです。
  • allow-forms: 埋め込みの閲覧コンテキストにフォームの実行を許可します。このキーワードが使われない場合はこの操作は行えません。
  • allow-modals: 埋め込みの閲覧コンテキストがモーダルウィンドウを開くことを許可します。
  • allow-orientation-lock: 埋め込みの閲覧コンテキストが、スクリーンの向きをロックする機能を無効化することを許可します。
  • allow-pointer-lock: 埋め込みの閲覧コンテキストに、Pointer Lock API の使用を許可します。
  • allow-popups: (window.opentarget="_blank"showModalDialog のような) ポップアップを許可します。このキーワードを与えなければ、これらの機能は黙って失敗します。
  • allow-popups-to-escape-sandbox: サンドボックス化したドキュメントが、サンドボックスのフラグを強制されない新たなウィンドウを開けるようにします。これにより、例えばサードパーティの広告に、元のページと同じ制限を強制されない安全なサンドボックスを提供できます。
  • allow-presentation: iframe が presentation セッションを開始できるようにするかを、埋め込み者が制御できるようにします。
  • allow-same-origin: コンテンツが通常のオリジンを持つとみなします。このキーワードが使われない場合は、埋め込みコンテンツは独自オリジンを持つとみなされます。
  • allow-scripts: 埋め込みの閲覧コンテキストにスクリプトの実行を許可します (ただしポップアップウィンドウは作れません)。このキーワードが使われない場合はこの操作は行えません。
  • allow-top-navigation: 埋め込みの閲覧コンテキストがトップレベルの閲覧コンテキストのコンテンツを操作 (読み込み) することを許可します。このキーワードが使われない場合はこの操作は行えません。
  • allow-top-navigation-by-user-activation: ユーザーの操作によって開始した場合に限り、埋め込まれた閲覧コンテキストがトップレベルの閲覧コンテキストのコンテンツを操作 (読み込み) することを許可します。このキーワードが使われない場合はこの操作は行えません。
サンドボックスのメモ:
  • 埋め込まれた文書がメインページと同じオリジンである場合、 allow-scriptsallow-same-origin を同時に使用すると、埋め込まれた文書がプログラムから sandbox 属性を削除することができるようになるため、用いるべきではありません。容認されているとはいえ、 sandbox 属性を使わないのと同様に安全ではありません。
  • サンドボックス化は一般に、攻撃者が潜在的な攻撃力を持つコンテンツを、ユーザーブラウザーのサンドボックス化した iframe の外に表示するような準備ができるなら、最小限の助けにしかなりません。潜在的なダメージを抑えるため、そうしたコンテンツは別の専用ドメインから提供することが推奨されます。
  • sandbox 属性は Internet Explorer 9 以前でサポートされていません。
src
埋め込むページの URL です。同一オリジンポリシーに従う空白ページは、 "about:blank" を使用してください。
srcdoc HTML5
埋め込みコンテキストを含めるページのコンテンツ。一般的にこの属性は、 sandbox 属性とともに使用すると想定されています。ブラウザーが srcdoc 属性をサポートする場合は、 src 属性で指定したコンテンツより優先します。ブラウザーが srcdoc 属性に対応していない場合は、 src 属性でファイルを指定していれば、それを代わりに表示します。この属性の内容が script タグを含む場合、スクリプトを実行するためには、たとえスクリプトの後に何もなかったとしても script の閉じタグが必須であることに注意してください。
width
フレームの幅を示します。 HTML 5 空は、この値は CSS ピクセルで指定します。以前は、物理ピクセル又はパーセント値のどちらかで指定していました。 CSS ピクセルと物理ピクセルの違いに関する説明は、 Window.devicePixelRatio を参照してください。

非推奨の属性

以下の属性は非推奨であり、すべてのブラウザーやユーザーエージェントで対応されているとは限りません。新しいコンテンツでは使用せず、既存のコンテンツから削除するようにしましょう。

align 非推奨 HTML4.01, HTML5 で廃止
フレームを含むコンテキストに対する、フレームの整列方法を指定します。
frameborder HTML5 で廃止
値が1(既定)なら、ブラウザーはこのフレームと他のすべてのフレームの間に境界線を描きます。値が 0 なら、他フレームとの間に境界線は描かれません。 <iframe> の周りに境界線を作成するには、代わりに CSS の border 及びその個別指定プロパティを使用してください。
longdesc HTML5 で廃止
フレームの長い説明の URI です。 広まっている誤用のせいで、非視覚ブラウザーでは有益ではありません。
marginheight HTML5 で廃止
フレームのコンテンツと top 及び bottom のマージン間の、ピクセル単位の余白量です。
marginwidth HTML5 で廃止
フレームのコンテンツと left 及び right のマージン間の、ピクセル単位の余白量です。
scrolling HTML5 で廃止
フレームにスクロールバー(もしくは他のスクロール用機能)をいつ表示するか決めるための列挙属性です:
  • auto: 必要なときだけ表示
  • yes: 常にスクロールバーを表示
  • no: スクロールバーを一切表示しない

スクリプト操作

<frame> 要素のようなインラインフレームは、 window.frames 擬似配列の中でウィンドウのフレームのリストに入ります。

スクリプトは DOM の iframe 要素を実装する HTMLIFrameElement オブジェクトから、 contentWindow プロパティを使って、それを含む HTML ページの window オブジェクトにアクセスできます。contentDocument プロパティは iframe の内側の document 要素を参照します (contentWindow.document と等価です)。

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

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

位置決めと表示倍率

要素を配置する際、 <iframe> 要素のボックス内における埋め込み文書の位置と配置、それに埋め込みコンテンツの表示倍率は、 object-position 及び object-fit プロパティで設定することができます。

iframe 要素の使用方法を示すいくつかの例を示します。

シンプルな <iframe>

こちらが <iframe> の基本的な使用例です。フレームを作成した後に、ユーザーがボタンをクリックすると、タイトルを取得してアラートで表示します。

HTML

<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe example 1" width="400" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

結果

<iframe> 内のリンクを別のタブで開く

このサンプルでは、Google マップを iframe 内で表示しています。

HTML

<base target="_blank">
<iframe id="Example2"
    title="Example2"
    width="400"
    height="300"
    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>

結果

メモ

Gecko 6.0 以降では、インラインフレームは内包する要素の境界線が border-radius で丸められているときも、それを考慮して正確に描画されます。

仕様策定状況

仕様書 策定状況 コメント
Referrer Policy
referrerpolicy attribute の定義
勧告候補 referrerpolicy 属性を追加。
HTML Living Standard
<iframe> の定義
現行の標準  
HTML5
<iframe> の定義
勧告  
HTML 4.01 Specification
<iframe> の定義
勧告  
Screen Orientation API 草案 sandbox 属性に allow-orientation-lock を追加。
Presentation API
allow-presentation の定義
勧告候補 sandbox 属性に allow-presentation を追加。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり あり1 あり あり あり2
align1 あり あり あり あり あり
allowfullscreen

27

17 webkit

あり

18

9 moz

11 ms あり

7

あり webkit

allowpaymentrequest なし なし なし なし なし なし
frameborder1 あり あり あり あり あり
height1 あり あり あり あり あり
longdesc1 あり あり あり あり あり
marginheight1 あり あり あり あり あり
marginwidth1 あり あり あり あり あり
name1 あり あり あり あり あり
referrerpolicy51 なし50 なし ? ?
scrolling1 あり あり あり あり あり
sandbox4 あり1710155
sandbox: sandbox='allow-popups' あり あり28 ? ? ?
sandbox: sandbox='allow-popups-to-escape-sandbox'46 なし49 なし32 ?
sandbox: sandbox='allow-modals' ? なし49 なし ? ?
sandbox: sandbox='allow-presentation'53 なし ? なし40 ?
sandbox: sandbox='allow-top-navigation-by-user-activation'58 なし ? なし45 ?
src1 あり あり あり あり あり
srcdoc20 なし25 なし156
width1 あり あり あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり1 あり あり2 あり
align あり あり あり あり あり あり あり
allowfullscreen ? ? あり

18

9 moz

なし

7

あり webkit

?
allowpaymentrequest なし なし なし なし なし なし なし
frameborder あり あり あり あり あり あり あり
height あり あり あり あり あり あり あり
longdesc あり あり あり あり あり あり あり
marginheight あり あり あり あり あり あり あり
marginwidth あり あり あり あり あり あり あり
name あり あり あり あり あり あり あり
referrerpolicy5151 なし50 ? ?5.0
scrolling あり あり あり あり あり あり あり
sandbox あり あり あり17 ?4.2 あり
sandbox: sandbox='allow-popups' ? ? なし27 ? ? ?
sandbox: sandbox='allow-popups-to-escape-sandbox'4646 なし4932 ?5.0
sandbox: sandbox='allow-modals' ? ? なし49 ? ? ?
sandbox: sandbox='allow-presentation' なし53 なし ?40 ?6.0
sandbox: sandbox='allow-top-navigation-by-user-activation'5858 なし ?45 ?7.0
src あり あり あり あり あり あり あり
srcdoc ? ? なし25 ? ? ?
width あり あり あり あり あり あり あり

1. The resize CSS property doesn't have any effect on this element due to bug 680823.

2. Safari has a bug that prevents iframes from loading if the iframe element was hidden when added to the page. iframeElement.src = iframeElement.src should cause it to load the iframe.