<IFRAME>

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

構文

HTMLの場合、iframe要素のタグ名及び属性名は大文字と小文字のどちらでもよい。

<IFRAME SRC="URL">
</IFRAME>

XHTMLの場合、iframe要素のタグ名及び属性名は小文字で記述する。

<iframe src="URL">
</iframe>

開始タグと終了タグの間には、インラインフレームに対応していないブラウザのためのメッセージを記述します。インラインフレームに対応しているブラウザでは、開始タグと終了タグの間の文字列は表示されません。

属性

属性は全て省略可能です。

allow

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

allowfullscreen

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

<iframe allowfullscreen="true" src="https://segakuin.com/example.html">

frameborder

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

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

<iframe frameborder="0" src="https://segakuin.com/example.html">

height

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

<iframe height="250px" src="https://segakuin.com/example.html">

loading

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

name

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

ondblclick

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

referrerpolicy

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

sandbox

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

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

scrolling

スクロールバーを表示するか否かを指定します。

値	意味
yes	表示する
no	表示しない
auto	自動（規定値）

<iframe scrolling="yes" src="https://segakuin.com/example.html">

src

インライン・フレーム内に表示する文書のURIを指定します。

<iframe src="https://segakuin.com/example.html">

srcdoc

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

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

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

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

width

インラインフレームの幅を指定します。

<iframe width="300px" src="https://segakuin.com/example.html">

使用例と表示サンプル

IFRAME 要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<iframe src="/privacy-policy.html" width="300px" height="250px">
</iframe>

AMP

AMP (Accelerated Mobile Pages) で <iframe> タグは使えない。

AMPでインラインフレームを表示するためには、<iframe> の代わりに <amp-iframe> タグを使う。

コンテンツモデル

iframe要素のコンテンツモデルは無い。開始タグと終了タグの間に子要素を持つことはできない。

タグの省略

iframe要素は開始タグ及び終了タグのいずれも省略できない。

JavaScript

JavaScriptからは IFrameElement インタフェースを通じてiframe要素へアクセスできる。

IFrameElementインタフェースは次に示すプロパティを持つ。

src: iframe要素のsrc属性
srcdoc: iframe要素のsrcdoc属性
name: iframe要素のname属性
sandbox: iframe要素のsandbox属性
allow: iframe要素のallow属性
allowFullscreen: iframe要素のallowfullscreen属性
width: iframe要素のwidth属性
height: iframe要素のheight属性
referrerPolicy: iframe要素のreferrerpolicy属性
loading: iframe要素のloading属性

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

参考文献

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