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

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

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

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

コンテンツカテゴリ フローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ, 対話型コンテンツ, 知覚可能コンテンツ
許可されている内容 代替コンテンツ。つまり、普段は表示されないが、 <iframe> 要素に対応していないブラウザーでは表示されるコンテンツ。 (RSS リーダーや電子メールクライアントは、代替コンテンツを表示することがよくある。)
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 埋め込みコンテンツを受け入れるすべての要素。
許可されている ARIA ロール application, document, img
DOM インターフェイス HTMLIFrameElement

属性

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

allow
<iframe>機能ポリシーを指定します。
allowfullscreen
この <iframe>requestFullscreen() を呼び出して全画面モードにすることができる場合は、 true に設定します。
この属性は古い属性とみなされており、 allow="fullscreen" に更新されました。
allowpaymentrequest
異なるオリジンの <iframe>Payment Request API の実行を許可する場合は true に設定します。
この属性は古い属性とみなされており、 allow="payment" に更新されました。
csp
埋め込みリソースを制限するコンテンツセキュリティポリシーです。詳しくは HTMLIFrameElement.csp をご覧ください。
height
フレームの高さを CSS ピクセル数で示します。既定値は 150 です。
importance
<iframe>src 属性内でのリソースのダウンロード優先度です。許されている値は次の通りです。
auto (既定値)
設定なし。ブラウザーはリソースの優先度を決めるために、独自の経験則を使用します。
high
このリソースは、より優先度の低いページリソースよりも前にダウンロードします。
low
このリソースは、より優先度の高いページリソースの後にダウンロードします。
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 : ユーザーの操作なしでダウンロードが発生することを許可します。
  • 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 : リソースが 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 非推奨 HTML4.01, HTML5 で廃止
フレームを含むコンテキストに対する、フレームの整列方法を指定します。
frameborder HTML5 で廃止
値が 1 (既定) ならば、このフレームの周りに境界線を描きます。値が 0 ならば、このフレームの周りの境界線を削除しますが、代わりに CSS の border プロパティを使用して <iframe> の境界線を制御してください。
longdesc HTML5 で廃止
フレームの内容についての長い説明の URL です。誤用が広がっているため、非視覚ブラウザーでは有用ではありません。
marginheight HTML5 で廃止
フレームの内容と上下の境界との間における、ピクセル単位の余白の量です。
marginwidth HTML5 で廃止
フレームの内容と左右の境界との間における、ピクセル単位の余白の量です。
scrolling HTML5 で廃止
ブラウザーがフレームにスクロールバーを表示することを示します。
  • auto: フレームの内容が、フレームの寸法よりも大きい場合のみ。
  • yes: 常にスクロールバーを表示する。
  • no: スクロールバーを一切表示しない。

標準外の属性

mozbrowser
これを 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> 内のリンクを別のタブで開く

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

HTML

<iframe id="Example2"
    title="iframe Example 2"
    width="400" height="300"
    style="border:none"
    src="https://maps.google.com/maps?f=q&source=s_q&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed">
</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 を追加。
Presentation API
allow-presentation の定義
勧告候補 sandbox 属性に allow-presentation を追加。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
iframeChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 あり
補足
完全対応 あり
補足
補足 The resize CSS property doesn't have any effect on this element due to bug 680823.
IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 あり
補足
完全対応 あり
補足
補足 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.
WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 The resize CSS property doesn't have any effect on this element due to bug 680823.
Opera Android 完全対応 ありSafari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 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.
Samsung Internet Android 完全対応 あり
align
非推奨
Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
allow
実験的
Chrome 完全対応 60Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 47Safari 完全対応 11.1WebView Android 完全対応 60Chrome Android 完全対応 60Firefox Android 未対応 なしOpera Android 完全対応 44Safari iOS 完全対応 11.3Samsung Internet Android 完全対応 8.0
allowfullscreenChrome 完全対応 27
完全対応 27
完全対応 17
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 ありFirefox 完全対応 18
完全対応 18
完全対応 9
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 完全対応 11
接頭辞付き
完全対応 11
接頭辞付き
接頭辞付き ms のベンダー接頭辞が必要
Opera 完全対応 ありSafari 完全対応 7
完全対応 7
完全対応 あり
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
WebView Android 完全対応 37
完全対応 37
完全対応 37
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Chrome Android 完全対応 27
完全対応 27
完全対応 18
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Firefox Android 完全対応 18
完全対応 18
完全対応 9
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 完全対応 7
完全対応 7
完全対応 あり
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Samsung Internet Android 完全対応 1.5
完全対応 1.5
完全対応 1.0
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
allowpaymentrequest
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
External protocol URLs blocked
非推奨
Chrome ? Edge ? Firefox 完全対応 67IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 完全対応 67Opera Android ? Safari iOS ? Samsung Internet Android ?
frameborder
非推奨
Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
heightChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
longdesc
非推奨
Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
marginheight
非推奨
Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
marginwidth
非推奨
Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
mozbrowser
非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1318532
補足 Available only to WebExtensions.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1318532
補足 Available only to WebExtensions.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
nameChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
referrerpolicyChrome 完全対応 51Edge 未対応 なしFirefox 完全対応 50IE 未対応 なしOpera 完全対応 38Safari 完全対応 11.1WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android 完全対応 50Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.2
sandboxChrome 完全対応 4Edge 完全対応 ありFirefox 完全対応 17IE 完全対応 10Opera 完全対応 15Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 17Opera Android ? Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 あり
sandbox="allow-modals"Chrome ? Edge 未対応 なしFirefox 完全対応 49IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 完全対応 49Opera Android ? Safari iOS ? Samsung Internet Android ?
sandbox="allow-popups"Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 28IE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 27Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
sandbox="allow-popups-to-escape-sandbox"Chrome 完全対応 46Edge 未対応 なしFirefox 完全対応 49IE 未対応 なしOpera 完全対応 32Safari ? WebView Android 完全対応 46Chrome Android 完全対応 46Firefox Android 完全対応 49Opera Android 完全対応 32Safari iOS ? Samsung Internet Android 完全対応 5.0
sandbox="allow-presentation"Chrome 完全対応 53Edge 未対応 なしFirefox 完全対応 50IE 未対応 なしOpera 完全対応 40Safari ? WebView Android 未対応 なしChrome Android 完全対応 53Firefox Android 完全対応 50Opera Android 完全対応 41Safari iOS ? Samsung Internet Android 完全対応 6.0
sandbox="allow-storage-access-by-user-activation"
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 65
無効
完全対応 65
無効
無効 From version 65: this feature is behind the dom.storage_access.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 完全対応 11.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 65
無効
完全対応 65
無効
無効 From version 65: this feature is behind the dom.storage_access.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 11.3Samsung Internet Android 未対応 なし
sandbox="allow-top-navigation-by-user-activation"Chrome 完全対応 58Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 45Safari 完全対応 11.1
補足
完全対応 11.1
補足
補足 Not initially available in 11.1, but added in sub-version 13605.1.33.1.2.
WebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 未対応 なしOpera Android 完全対応 43Safari iOS ? Samsung Internet Android 完全対応 7.0
scrolling
非推奨
Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
srcChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
srcdocChrome 完全対応 20Edge 未対応 なしFirefox 完全対応 25IE 未対応 なしOpera 完全対応 15Safari 完全対応 6WebView Android 完全対応 37Chrome Android 完全対応 25Firefox Android 完全対応 25Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 1.5
widthChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。