HTMLの <iframe> タグ

インラインフレームとは、HTML文書内で別のHTML文書を表示することである。HTMLでインラインフレームを表示するには、IFRAME要素（タグ）を使う。

HTML

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。iframe要素の終了タグは省略できない。

<iframe></iframe>

<IFRAME></IFRAME>

AMP

AMP (Accelerated Mobile Pages) の場合、<iframe> タグは使えない。AMPでインラインフレームを表示するためには、<iframe> タグの代わりに <amp-iframe> タグを使う。

コンテンツモデル

iframe要素の開始タグと終了タグの間に子要素およびテキストを含むことはできない。

属性

以下に示す属性をiframe要素に指定することができる。

allow

インライン・フレームのコンテンツに適用されるアクセス許可ポリシーを指定する。

以下に示す機能を指定できる。

• autoplay
• camera
• fullscreen
• geolocation
• gyroscope
• magnetometer
• microphone
• midi
• paymentRequest
• usb

以下に示す許可リストを各機能に対して指定する。

許可リスト

許可リスト	説明
*	すべてのオリジンで許可
'self'	埋め込まれた文書が最上位のブラウジング・コンテキストと同じオリジンの場合は許可
'src'	埋め込まれた文書がsrc属性で指定したURLと同じオリジンの場合は許可
'none'	すべてのオリジンで拒否
URL	特定のオリジンのみ許可する

インライン・フレームの全画面表示を許可する。

<iframe src="/html/example/iframe.html" allow="fullscreen"></iframe>

allowfullscreen

このインライン・フレームが全画面モードにすることができる場合は true を指定する。

<iframe src="/html/example/iframe.html" allowfullscreen="true"></iframe>

インライン・フレームの全画面モードを許可する場合、allowfullscreen 属性を指定するだけで、値を指定しなくてもよい。

<iframe src="/html/example/iframe.html" allowfullscreen></iframe>

frameborder

インライン・フレームとの境界線を表示するか否かを指定する。

frameborder

値	意味
0	境界線を表示しない
1	境界線を表示する（規定値）

インライン・フレームの境界線を表示させない例を以下に示す。

<iframe src="/html/example/iframe.html" frameborder="0"></iframe>

height

インライン・フレームの高さを指定する。

<iframe src="/html/example/iframe.html" height="250px"></iframe>

loading

ロード・ディファレンシャルを決定する際に使用される。

name

ネストされたブラウジング・コンテキストの名前

ondblclick

要素がダブルクリックされたときに実行するJavaScriptを指定する。

referrerpolicy

要素によって開始されるフェッチに対するリファラー・ポリシー

sandbox

ネストされたコンテンツに対するセキュリティルール

以下に示す値をsandbox属性に指定できる。

• allow-downloads
• allow-forms
• allow-modals
• allow-orientation-lock
• allow-pointer-lock
• allow-popups
• allow-popups-to-escape-sandbox
• allow-presentation
• allow-same-origin
• allow-scripts
• allow-top-navigation
• allow-top-navigation-by-user-activation
• allow-top-navigation-to-custom-protocols

<iframe sandbox srcdoc="The <i>Titanic</i> sank in 1912."></iframe>

src

インライン・フレーム内に表示するリソースのURLを指定する。

<iframe src="/html/example/iframe.html"></iframe>

srcdoc

インライン・フレームにレンダリングするドキュメント

srcdoc 属性が存在する場合は、以下の構文からなる HTML 構文を用いた値を、指定された順序で指定しなければならない。

1. 任意の数のコメントとASCIIの空白文字
2. 任意で DOCTYPE を指定する。
3. 任意の数のコメントとASCIIの空白文字
4. html 要素の形式をとったドキュメント要素。
5. 任意の数のコメントとASCIIの空白文字

<iframe srcdoc="The <i>Titanic</i> sank in 1912."></iframe>

width

インライン・フレームの幅を指定する。

<iframe src="/html/example/iframe.html" width="300px"></iframe>

カテゴリ

iframe要素は次に示すカテゴリに属する。

• フロー・コンテンツ
• フレージング・コンテンツ
• エンベデッド・コンテンツ
• インタラクティブ・コンテンツ
• パルパブル・コンテンツ

JavaScript

JavaScript からは IFrameElement インタフェースを通じて iframe 要素へアクセスできる。IFrameElement インタフェースは以下に示すプロパティを持つ。

IFrameElement は HTMLElement インタフェースを継承しているので、HTMLElement インタフェースのプロパティも利用できる。

参考文献

Web Hypertext Application Technology Working Group (2022) "The iframe element" HTML Living Standard