<iframe>要素

<iframe>要素の定義

英語で「列をなして」という意味のある”in line”＋「枠」を表す、”frame”より。
HTML文書では、入れ子になった閲覧コンテキストを表現し、現在のHTML文書に他のHTML文書を埋め込むのに使用されます。
広く使われている例としては、GoogleMapやYoutube動画をWebページに埋め込んで表示したい場合に、「埋め込みコード」として提供されているコードが、<iframe> 要素を使って記述されています。

子要素として使用できるもの

空要素なので子要素は使用できません。

親要素として使えるもの

埋め込みコンテンツを受け入れるすべての要素。

許可されているARIAロール

application, document, img

DOMインターフェース

HTMLIFrameElement

属性

グローバル属性が指定できます。

allow

<iframe> の機能ポリシーを指定します。

height

フレームの高さを CSS ピクセル数で示します。既定値は 150 です。

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-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-top-navigation ：リソースが最上位の閲覧コンテキスト (_top という名前のもの) に移動できるようにします。
• allow-top-navigation-by-user-activation ：リソースが最上位の閲覧コンテキストに移動できるようにしますが、ユーザーの操作によって開始されたものに限ります。

src

埋め込むページの URL です。同一オリジンポリシーに従う空白ページを埋め込む場合は、 about:blank の値を使用してください。また、プログラムから <iframe> の src 属性を削除すると (例えば Element.removeAttribute() などで)、 Firefox (バージョン65以降)、 Chromium ベースのブラウザー、 Safari/iOS では about:blank が読み込まれます。

srcdoc

埋め込むインライン HTML で、 src 属性を上書きします。ブラウザーが srcdoc 属性に対応していない場合は、 src 属性の URL で代替されます。

width

フレームの幅を CSS ピクセル数で示します。既定値は 300 です。

スクリプト操作

インラインフレームは、 window.frames 擬似配列に入ります。
DOM の HTMLIFrameElement オブジェクトでは、スクリプトはフレーム化されたリソースのwindow オブジェクトに contentWindow プロパティを使ってアクセスすることができます。 contentDocument プロパティは iframe の内側の document 要素を参照します (contentWindow.document と等価です)。
スクリプトは、フレームの内側からは window.parent で親ウィンドウを参照できます。
フレームの内容にアクセスするスクリプトは、同一オリジンポリシーに従います。別なオリジンから読み込まれたスクリプトは、フレーム内のスクリプトがフレームの親にアクセスする場合を含め、他の window オブジェクトのほとんどのプロパティにアクセスできません。オリジンをまたいだやりとりは Window.postMessage() を使用して実現できます。

サンプル

以下のGoogleMapの地図は <iframe> 要素を使って記述されています。