<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程度で表示されます。(環境により異なるかもしれません)