<iframe>: インラインフレーム要素

HTML のインラインフレーム要素 (<iframe>) は、入れ子になった閲覧コンテキストを表現し、現在の HTML ページに他のページを埋め込むことができます。

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

それぞれの閲覧コンテキストは完全な文書環境であるため、ページの中で <iframe> を使用するごとに、必要となるメモリやその他の計算リソースが増加します。理論的には好きなだけ <iframe> を使用することができますが、パフォーマンスの問題を確認してください。

コンテンツカテゴリ フローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ, 対話型コンテンツ, 知覚可能コンテンツ
許可されている内容 なし。
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 埋め込みコンテンツを受け入れるすべての要素。
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール application, document, img, none, presentation
DOM インターフェイス HTMLIFrameElement

属性

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

allow
機能ポリシー<iframe> に指定します。このポリシーは、 <iframe> が利用可能な機能をリクエストのオリジン (例:マイク、カメラ、バッテリー、ウェブ共有 API へのアクセスなど) に基づいて定義します
詳細と例については、機能ポリシーの使用 > iframe の allow 属性を参照してください。
allowfullscreen
この <iframe>requestFullscreen() を呼び出して全画面モードにすることができる場合は、 true に設定します。
この属性は古い属性とみなされており、 allow="fullscreen" に更新されました。
allowpaymentrequest
異なるオリジンの <iframe>Payment Request API の実行を許可する場合は true に設定します。
この属性は古い属性とみなされており、 allow="payment" に更新されました。
csp これは実験段階の API です。製品内のコードで使用しないようご注意ください。
埋め込みリソースを制限するコンテンツセキュリティポリシーです。詳しくは HTMLIFrameElement.csp をご覧ください。
height
フレームの高さを CSS ピクセル数で示します。既定値は 150 です。
loading これは実験段階の API です。製品内のコードで使用しないようご注意ください。
ブラウザーが iframe をどのように読み込むかを示します。
  • eager: 可視ビューポートの外にあるかどうかに関わらず、 iframe を直ちにロードします (これが既定値です)。
  • lazy: ブラウザーで定義されたビューポートからの計算された距離に達するまで iframe の読み込みを延期します。
name
埋め込み閲覧コンテキストのターゲット表の名前です。 <a>, <form>, <base> 要素における target 属性の値、 <input><button> 要素における formtarget 属性の値、 window.open() メソッドの windowName 引数の値として使用することができます。
referrerpolicy
フレームのリソースにアクセスする際にどのリファラーを送信するかを示します。
  • no-referrer: Referer ヘッダーを送信しません。
  • no-referrer-when-downgrade (既定値): Referer ヘッダーは TLS (HTTPS) のないオリジンには送信しません。
  • origin: 送信するリファラーを、参照しているページのオリジン (スキーム, ホスト名, ポート番号) に限定します。
  • origin-when-cross-origin: 他のオリジンへ送信されるリファラーは、スキーム、ホスト名、ポート番号に制限します。同一オリジンへの移動では、パスも含めます。
  • same-origin: リファラーは同じオリジンには送信しますが、異なるオリジンへのリクエストにはリファラー情報を送信しません。
  • strict-origin: プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信しますが、宛先の安全性が劣る場合 (HTTPS→HTTP) には送信しません。
  • strict-origin-when-cross-origin: 同一オリジンへのリクエストには URL 全体を送信し、プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信し、宛先の安全性が劣る場合 (HTTPS→HTTP) にはヘッダーを送信しません。
  • unsafe-url: リファラーにオリジンおよびパスを含めます (ただし、フラグメントパスワードユーザー名は含めません)。オリジンやパスの情報が TLS で保護されたリソースから安全性の劣るオリジンへ漏えいしますので、これは安全ではありません
sandbox
フレーム内のコンテンツに追加の制約を適用します。この属性の値は、空にするとすべての制約を適用し、空白区切りのトークンにすると特定の制約を外します。
  • allow-downloads-without-user-activation これは実験段階の API です。製品内のコードで使用しないようご注意ください。 : ユーザーの操作なしでダウンロードが発生することを許可します。
  • allow-downloads: ユーザーの操作により発生するダウンロードを許可します。
  • allow-forms: リソースがフォームを送信することを許可します。このキーワードが使用されない場合は、フォーム送信がブロックされます。
  • allow-modals: リソースがモーダルウィンドウを開くことができるようにします。
  • allow-orientation-lock: リソースがスクリーンの方向をロックすることができるようにします。
  • allow-pointer-lock: リソースが Pointer Lock API を使用できるようにします。
  • allow-popups: (window.open(), target="_blank", showModalDialog() のような) ポップアップを許可します。このキーワードを与えなければ、これらの機能は暗黙に失敗します。
  • allow-popups-to-escape-sandbox: サンドボックス化された文書が、サンドボックスを継承するウィンドウではないウィンドウを開けるようにします。例えば、これによって安全に広告をサンドボックス化し、同じ制約を広告のリンク先のページに強制しないようにすることができます。
  • allow-presentation: リソースがプレゼンテーションセッションを開始できるようにします。
  • allow-same-origin: このトークンが使用されなかった場合、リソースは特殊なオリジンからのものであるとして扱い、常に同一オリジンポリシーに失敗します。
  • allow-scripts: リソースがスクリプト (ただし、ポップアップウィンドウを作成しないもの) を実行できるようにします。
  • allow-storage-access-by-user-activation これは実験段階の API です。製品内のコードで使用しないようご注意ください。 : リソースが Storage Access API で親のストレージ容量へのアクセスを要求できるようにします。
  • allow-top-navigation: リソースが最上位の閲覧コンテキスト (_top という名前のもの) に移動できるようにします。
  • allow-top-navigation-by-user-activation: リソースが最上位の閲覧コンテキストに移動できるようにしますが、ユーザーの操作によって開始されたものに限ります。
サンドボックスのメモ:
  • 埋め込まれた文書のオリジンが埋め込み先のページと同じである場合、 allow-scriptsallow-same-origin を同時に使用すると、埋め込まれた文書から sandbox 属性を削除することができるようになるため、絶対に避けるべきです。 — sandbox 属性をまったく使用しないよりも安全ではなくなります。
  • 攻撃者がサンドボックス化した iframe の外側にコンテンツを表示することができる場合、サンドボックス化は無意味です。例えば、閲覧者がフレームを新しいタブで開く場合などです。潜在的なダメージを抑えるため、そうしたコンテンツは別のオリジンから提供するようにもしてください。
  • sandbox 属性は Internet Explorer 9 以前では対応していません。
src
埋め込むページの URL です。同一オリジンポリシーに従う空白ページを埋め込む場合は、 about:blank の値を使用してください。また、プログラムから <iframe> の src 属性を削除すると (例えば Element.removeAttribute() などで)、 Firefox (バージョン65以降)、 Chromium ベースのブラウザー、 Safari/iOS では about:blank が読み込まれます。
srcdoc
埋め込むインライン HTML で、 src 属性を上書きします。ブラウザーがブラウザーが srcdoc 属性に対応していない場合は、 src 属性の URL で代替されます。
width
フレームの幅を CSS ピクセル数で示します。既定値は 300 です。

非推奨の属性

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

align これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。
フレームを含むコンテキストに対する、フレームの整列方法を指定します。
frameborder これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。
値が 1 (既定) ならば、このフレームの周りに境界線を描きます。値が 0 ならば、このフレームの周りの境界線を削除しますが、代わりに CSS の border プロパティを使用して <iframe> の境界線を制御してください。
longdesc これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。
フレームの内容についての長い説明の URL です。誤用が広がっているため、非視覚ブラウザーでは有用ではありません。
marginheight これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。
フレームの内容と上下の境界との間における、ピクセル単位の余白の量です。
marginwidth これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。
フレームの内容と左右の境界との間における、ピクセル単位の余白の量です。
scrolling これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。
ブラウザーがフレームにスクロールバーを表示することを示します。
  • auto: フレームの内容が、フレームの寸法よりも大きい場合のみ。
  • yes: 常にスクロールバーを表示する。
  • no: スクロールバーを一切表示しない。

標準外の属性

mozbrowser この API は標準化されていません。
これを Firefox のウェブ拡張機能に公開するには バグ 1318532 を参照してください。
この <iframe> を最上位のブラウザーウィンドウのように動作させます。詳しくは Browser API を参照してください。
ウェブ拡張機能でのみ使用可能です。

スクリプト操作

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

DOM の HTMLIFrameElement オブジェクトでは、スクリプトはフレーム化されたリソースの window オブジェクトに contentWindow プロパティを使ってアクセスすることができます。 contentDocument プロパティは iframe の内側の document 要素を参照します (contentWindow.document と等価です)。

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

フレームの内容にアクセスするスクリプトは、同一オリジンポリシーに従います。別なオリジンから読み込まれたスクリプトは、フレーム内のスクリプトがフレームの親にアクセスする場合を含め、他の window オブジェクトのほとんどのプロパティにアクセスできません。オリジンをまたいだやりとりは Window.postMessage() を使用して実現できます。

位置指定と表示倍率

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

シンプルな <iframe>

<iframe> の例です。フレームを作成した後に、ユーザーがボタンをクリックすると、タイトルをアラートで表示します。

HTML

<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html"
            title="iframe Example 1" width="400" height="300">
</iframe>

結果

アクセシビリティの考慮

読み上げソフトのような支援技術を利用して操作している人は、 <iframe> 上の title 属性を使用して内容をラベル付けします。 title の値で埋め込みコンテンツを正確に説明してください。

<iframe title="アボガドのウィキペディアページ" src="https://en.wikipedia.org/wiki/Avocado"></iframe>

この title がないと、埋め込みコンテンツが何であるかを特定するために <iframe> の内容に移動しなければならなります。このコンテキストの移動は、特に複数の <iframe> が存在するページや、動画や音楽などの対話型コンテンツが埋め込まれているページでは、混乱を招き、時間のかかる作業になる可能性があります。

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報