インラインフレームとは、HTML文書内で別のHTML文書を表示することである。HTMLでインラインフレームを表示するには、IFRAME要素(タグ)を使う。
HTMLの場合、iframe要素のタグ名及び属性名は大文字と小文字のどちらでもよい。
<IFRAME SRC="URL">
</IFRAME>
XHTMLの場合、iframe要素のタグ名及び属性名は小文字で記述する。
<iframe src="URL">
</iframe>
開始タグと終了タグの間には、インラインフレームに対応していないブラウザのためのメッセージを記述します。インラインフレームに対応しているブラウザでは、開始タグと終了タグの間の文字列は表示されません。
属性は全て省略可能です。
<iframe allowfullscreen="true" src="https://segakuin.com/example.html">
値 | 意味 |
---|---|
0 | 境界線を表示しない |
1 | 境界線を表示する(規定値) |
<iframe frameborder="0" src="https://segakuin.com/example.html">
<iframe height="250px" src="https://segakuin.com/example.html">
<iframe sandbox srcdoc="The <i>Titanic</i> sank in 1912.">
</iframe>
値 | 意味 |
---|---|
yes | 表示する |
no | 表示しない |
auto | 自動(規定値) |
<iframe scrolling="yes" src="https://segakuin.com/example.html">
<iframe src="https://segakuin.com/example.html">
srcdoc 属性が存在する場合は、以下の構文からなる HTML 構文を用いた値を、指定された順序で指定しなければならない。
<iframe sandbox srcdoc="The <i>Titanic</i> sank in 1912.">
</iframe>
<iframe width="300px" src="https://segakuin.com/example.html">
IFRAME 要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。
<iframe src="/privacy-policy.html" width="300px" height="250px">
</iframe>
AMP (Accelerated Mobile Pages) で <iframe>
タグは使えない。
AMPでインラインフレームを表示するためには、<iframe>
の代わりに <amp-iframe>
タグを使う。
iframe要素は次に示すカテゴリに属する。
iframe要素のコンテンツモデルは無い。開始タグと終了タグの間に子要素を持つことはできない。
iframe要素は開始タグ及び終了タグのいずれも省略できない。
JavaScriptからは IFrameElement インタフェースを通じてiframe要素へアクセスできる。
IFrameElementインタフェースは次に示すプロパティを持つ。
IFrameElementはHTMLElementインタフェースを継承しているので、HTMLElementインタフェースのプロパティも利用できる。
Web Hypertext Application Technology Working Group (2021) "The iframe element" HTML Living Standard