<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 構文を用いた値を、指定された順序で指定しなければならない。

  1. 任意の数のコメントとASCIIの空白文字
  2. 任意で DOCTYPE を指定する。
  3. 任意の数のコメントとASCIIの空白文字
  4. html 要素の形式をとったドキュメント要素。
  5. 任意の数のコメントと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要素のコンテンツモデルは無い。開始タグと終了タグの間に子要素を持つことはできない。

タグの省略

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