<iframe> - インラインフレーム

形式: <iframe src="...">～</iframe>
サポート: LS / H5 / H4T / e3 / Ch1 / Fx1 / Sa1 / Op1 / N6
カテゴリ: フローコンテンツ; フレージングコンテンツ; エンベデッドコンテンツ; インタラクティブコンテンツ; パルパブルコンテンツ
親要素: エンベデッドコンテンツを子要素に持てるもの
子要素: HTML Living Standard: 無し; HTML 5.2: 文脈の要求に従ったテキスト
タグの省略: 開始タグ:必須 / 終了タグ:必須
属性: グローバル属性; src; srcdoc; name; sandbox; allow; allowfullscreen; allowpaymentrequest [廃止]; allowusermedia [廃止]; width; height; referrerpolicy; loading

iframe は Inline FRAME の略です。src で指定した他のドキュメントを画面中にインラインで表示することができます。<iframe>～</iframe> の間には、<iframe> に対応していないブラウザのためのメッセージを記述します。

HTML4.01 Transitional には採用されたものの、HTML4.01 Strict には採用されませんでしたが、HTML5 には採用されています。

グローバル属性: 詳細はグローバル属性を参照してください。

src=url: LS/H5/H4T/e3/Ch/Fx/Sa/Op/N6; フレームの中身に表示する文書のURLを指定します。
srcdoc=contents: LS/H5/Ch/Fx/Op; フレームに表示するコンテンツを src属性で別ファイルから指定するのではなく、直接 srcdoc属性で指定します。IE11, Safari 5.1 ではまだサポートされていません。
name=name: LS/H5/H4T/e3/Ch/Fx/Sa/Op/N6; フレームの名前を指定します。

sandbox=sandbox

LS/H5/e10/Ch/Fx/Sa/Op

sandbox 属性を値なしで指定すると、iframeで表示されるコンテンツは別サイトのものと見なされ、フォームのサブミット、スクリプト、トップレベルコンテンツへの操作(window.top.location など)、Cookieなどへのアクセス、ポップアップ(<a target="_blank"> や window.open())、プラグインなどが無効化されます。sandbox="allow-xxx" のように値を指定すると、一部の機能を許可することができます。allow-xxx には、下記の値をスペースで区切って複数指定することが可能です。

allow-forms: LS/H5。フォームのサブミットを許可。
allow-modals: LS。モーダルダイアログの表示を許可。
allow-orientation-lock: LS。スクリーンの方向制御ロックを許可。
allow-pointer-lock: LS/H5。ポインターのロックを許可。
allow-popups: LS/H5。ポップアップを許可。
allow-popups-to-escape-sandbox: LS。サンドボックスが適用されないポップアップ表示を許可。
allow-presentation: LS/H5.2。Presentation APIの利用を許可。
allow-same-origin: LS/H5。Cookieなどへのアクセスを許可。
allow-scripts: LS/H5。ポップアップを除くスクリプトを許可。
allow-top-navigation: LS/H5。トップレベルコンテンツへの操作を許可。
allow-top-navigation-by-user-activation: LS。ユーザ操作による場合のみ、トップレベルコンテンツへの操作を許可。

allow=allow

LS

フレームのコンテンツに許可する権限のリストを指定します。詳細は許可リストを参照してください。

allowfullscreen

LS/H5.1

フレームのコンテンツに requestFullscreen() による全画面フレームを許可するか否かを指定します。allow="fullscreen" でも代用できます。

allowpaymentrequest

[非推奨] LS/H5.2

フレームのコンテンツに PaymentRequest API を使用することを許可します。HTML5.2 で定義され、HTML Living Standard にも一度採用されましたが、後に破棄されました。代わりに allow="payment ..." を使用します。
https://www.w3.org/TR/payment-request/

allowusermedia

[非推奨] LS

フレームのコンテンツに getUserMedia() API を使用することを許可します。HTML Living Standard に一度採用されましたが、後に廃止されました。代わりに allow="camera ..." などを使用します。

referrerpolicy=policy

LS/H5.2/Ch46/Fx50

リソースにアクセスした際のリファラー(Referer)送信ポリシーを指定します。

no-referrer: 送信しない。
no-referrer-when-downgrade: https から http にダウングレードする際には送信しない(デフォルト)。
same-origin: 同一オリジン間移動の場合のみ送信する。
origin: オリジン情報(プロトコル＋FQDN＋ポート番号)のみを送信する。
strict-origin: オリジン情報(プロトコル＋FQDN＋ポート番号)のみを送信するが、ダウングレード時には送信しない。
origin-when-cross-origin: オリジンをまたがる場合は、オリジン情報のみを送信する。
strict-origin-when-cross-origin: オリジンをまたがる場合は、オリジン情報のみを送信するが、ダウングレード時には送信しない。
unsafe-url: 常に送信する。

詳細は下記を参照してください。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Referrer-Policy

loading=loading

LS/Ch

logind="lazy" を指定すると、ページをスクロールしてコンテンツが表示されそうになった時点で読み込みを開始する Lazy-loading を有効にします。サポート状況は CanIUse.com を参照してください。

width=n: LS/H5/H4T/e3/Ch/Fx/Sa/Op/N6; フレームの横幅をピクセルまたはパーセンテージで指定します。
height=n: LS/H5/H4T/e3/Ch/Fx/Sa/Op/N6; フレームの高さをピクセルまたはパーセンテージで指定します。
align=align: [非推奨] H4T-4T/e3/Ch/Fx/Sa/Op/N6; フレームを表示する位置を指定します。
hspace=n: [非推奨] e3-10; フレームの周りの横方向の余白をピクセル単位で指定します。
vspace=n: [非推奨] e3-10; フレームの周りの縦方向の余白をピクセル単位で指定します。
marginheight=n: [非推奨] H4T-4T/e3/Ch/Fx/Sa/Op//N6; フレームの上下の余白をピクセル単位で指定します。
marginwidth=n: [非推奨] H4T-4T/e3/Ch/Fx/Sa/Op/N6; フレームの左右の余白をピクセル単位で指定します。
allowtransparency=bool: [非推奨] e5.5-9?; フレームを透明色にする場合は true を指定します。既定値は false です。この機能を有効にするには、フレーム内に表示するドキュメントの <body> の背景色(bgcolor)が "transparent" である必要があります。最近のブラウザでは、デフォルトで透明色になるようです。
seamless: [非推奨] H5d; フレームコンテンツがシームレスに表示されます。フレームの境界線は無く、CSS等も、あたかもフレーム内コンテンツがフレーム外のコンテンツの一部であるように適用されます。HTML5 の草案で検討されていましたが、最終勧告では破棄されました。

border=n: [非推奨] e4-?; フレームの枠線の太さをピクセル単位で指定します。
bordercolor=color: [非推奨] e4-?; フレームの枠線の色を指定します。
frameborder=frameborder: [非推奨] H4T/e3-?/N6; フレームの枠線を表示する場合は 1 を、表示しない場合は 0 を指定します。IEでは yes と no も指定可能です。

datafld=datafld

[非推奨] e4-?

データバインド機能を用いる際の、データソースの列名を指定します。

datasrc=datasrc

[非推奨] e4-?

データバインド機能を用いる際の、データソースの ID を指定します。

framespacing=framespacing

[非推奨] e4-?

フレーム間の隙間をピクセル単位で指定します。

longdesc=longdesc

[非推奨] H4T-4T

このフレームに関する説明が title 属性で示せないくらいに長文の場合に、その説明ページのURLを指定します。

scrolling=scrolling

[非推奨] H4T/e3/Ch/Fx/Sa/Op/N6

スクロールバーの表示を制御します。HTML5 や HTML Living Standard ではサポートされていません。スタイルシートでスクロールバーを消すには、表示される側のコンテンツで body { overflow: hidden; } を指定する必要があります。

yes: 常に表示
no: 常に非表示
auto: 自動(既定値)

HTML

<iframe src="a.htm" width=600 height=200></iframe>

表示

allow 属性の許可リストには機能名と対象リストを指定します。

allow="feature1 target1a target1b...; feature2 target2a target2b..."

対象リスト (target) には下記を指定します。

*: すべてのオリジン。
'self': 同じオリジン。スキーマ(HTTP/HTTPS)＋サーバ名＋ポート番号が合致するもの。
'src': src 属性で指定したURLと同じオリジン。
http://～, https://～: 指定したURLのオリジン。
'none': すべてのオリジンで拒否する。

機能名 (feature) には下記などを指定します。

fullscreen: Fullscreen API の使用。
payment: Payment Request API の使用。
gyolocation: Geolocation API の使用。
camera: カメラデバイスの使用。
microphone: マイクデバイスの使用。

詳細は下記を参照してください。

https://github.com/w3c/webappsec-permissions-policy/blob/main/features.md

下記の例は https://www.example.com/ にのみ、カメラとマイクの利用を許可します。

HTML

allow="camera https://www.example.com/; microphone https://www.example.com"

下記の例は、同一オリジンのコンテンツのみに Payment API の使用を許可します。

HTML

allow="payment 'self'"

<iframe> - インラインフレーム

概要

説明

属性

【共通属性】

【個別属性】

【セキュリティ関連】

【表示関連】

【ボーダー関連】

【その他の属性】

使用例

許可リスト

リンク