<iframe></iframe>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | エンベッディッド・コンテンツが置ける場所 |
| 内容 | 無し 本文参照 |
iframe要素は、入れ子にされたブラウジング・コンテキスト（インラインフレーム）を表します。
この機能を使うことで、文書内に別の文書を埋め込めるようになります。
<iframe src="example.html"></iframe>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
src="" |
文書の指定 | URL | フレーム内に表示する文書のURL |
width="" |
フレームの幅 | 数値 | ピクセル数 |
height="" |
フレームの高さ | 数値 | ピクセル数 |
name="" |
フレームの名前 | アンダースコア（ _ ）で始まらない文字列 | 固有のフレーム名（ブラウジング・コンテキスト名） |
srcdoc="" |
フレーム内のコンテンツ | HTMLコード | フレーム内に表示するコンテンツ |
sandbox="" |
セキュリティ上の制限 | キーワード | 特定のキーワードを指定（詳細） |
allowfullscreen |
全画面モードを許可 | （allowfullscreen） |
値は省略可能 |
referrerpolicy="" |
コンテンツを読み込む際のリファラーポリシー | リファラーポリシー | 既定値は strict-origin-when-cross-origin |
allow="" |
 コンテンツのパーミッションポリシー |
指示のリスト | 機能名と許可リストで構成される指示内容（詳細） |
loading="" |
コンテンツを読み込むタイミング |
lazy |
ビューポートに表示されるタイミングで読み込む |
eager |
ページのロード時に直ちに読み込む（既定値） | ||
- src属性とsrcdoc属性が同時に指定された場合は、srcdoc属性が優先されることになります。
- グローバル属性のitemprop属性を指定する場合は、src属性も指定しなければなりません。
各属性の詳細については、下記のページを参考にしてください。
要素の内容に関して
以前のHTMLではiframe要素内（開始タグと終了タグの間）にテキストを配置することができましたが、現行のHTMLではコンテンツ・モデルが無しになったため、空白文字以外の内容は含められなくなりました。
しかし同時に、（仕様書から引用：）iframe要素をサポートしないレガシーユーザーエージェントでは、コンテンツはフォールバックコンテンツとして機能する可能性のあるマークアップとして解析されます。
とも説明されています。（引用文はGoogle翻訳）
つまり、古いブラウザ向けのフォールバックコンテンツとしてなら、iframe要素内にコンテンツを配置することが可能、そうでなければ不可、ということになるかと思います。（勝手に解釈）
- 旧HTMLからの変更点
-
- HTML5：要素の定義が微妙に変わりました。（インラインフレーム → 入れ子にされたブラウジング・コンテキスト）
- HTML5：要素内容の意味が変わりました。（代替コンテンツ → 無意味なテキスト）
- HTML5：longdesc属性、scrolling属性、frameborder属性、marginwidth属性、marginheight属性、align属性が廃止され、srcdoc属性とsandbox属性が追加されました。
- HTML5：width属性とheight属性の値にパーセント値を指定できなくなりました。
- HTML5.1：allowfullscreen属性が追加されました。
- HTML5.2：referrerpolicy属性とallowpaymentrequest属性が追加されました。
- HTML LS：要素のコンテンツ・モデルが変更されました。（テキスト → 無し）
- HTML LS：allowpaymentrequest属性が廃止され、allow属性とloading属性が追加されました。
使用例
<iframe src="iexample_a.html"></iframe>
- 表示例
- 表示サイズの指定がない場合は、上記のように300×150px程度で表示されます。（環境により異なるかもしれません）