最終更新日 2021年4月7日

iframe要素

iframe要素は、ページ内にほかのページを埋め込む「インラインフレーム」を設定します。

src属性は、インラインフレームとして表示するページのURLを指定します。

srcdoc属性はHTML5からの新しい属性で、インラインフレームとして表示するページのコンテンツを直接、指定できます。src属性とsrcdoc属性の両方を指定した場合は、srcdoc属性の値が優先されますが、srcdoc属性に対応していない以前のブラウザ用に、src属性を使ってインラインフレーム用コンテンツのURLを設定しておくことが可能です。

sandbox属性もHTML5からの新しい属性です。sandbox属性を値なしで指定すると、iframe要素によって組み込まれたコンテンツは表示中のページとは別起源のものとして扱われ、フォーム、スクリプトの無効化、別のドキュメントへのリンク禁止、プラグインの無効化などの制限が設定されます。「allow-same-origin」「allow-top-navigation」「allow-forms」「allow-scripts」の4つのキーワードを指定することで、埋め込みコンテンツの制限に関する設定を変更できます。

seamless属性もHTML5からの新しい属性です。指定すると、iframe要素で囲んだインラインフレームのコンテンツが、親要素のドキュメント内の一部であるように表示されます。

name属性では、インラインフレームとして表示するコンテンツに名前を付けます。

iframe要素は、Embeddedコンテンツの記述箇所で使用できます。

HTML5での変更点

・srcdoc、sandbox、seamlessの各属性が新たに追加されました。
・align、allowtransparency、frameborder、hspace、marginwidth、marginheight、scrolling、vspace、longdesc、datasrc、datafldの各属性は廃止されました。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ Phrasingコンテンツ Embeddedコンテンツ Interactiveコンテンツ	省略不可	Embeddedコンテンツを子にできる要素	テキスト

属性	値	説明
src	URL	インラインフレームとして表示するページのURLを指定します。
srcdoc	ページコンテンツ	インラインフレームとして表示するページのコンテンツを指定します。
sandbox	キーワード	埋め込みコンテンツの制限を設定します。「allow-same-origin」「allow-top-navigation」「allow-forms」「allow-scripts」の4つのキーワードを指定可能です。
seamless	seamless	論理属性。インラインフレームのコンテンツと親要素のコンテンツを一体化させる場合に指定します。
name	文字列	インラインフレームとして表示するコンテンツの名前を指定します。
width	数値	インラインフレームの幅をピクセルで指定します。
height	数値	インラインフレームの高さをピクセルで指定します。
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <p>更新履歴です。</p>
  <iframe src="update.html" width="400" height="200"></iframe>
</body>

参考文献：W3C HTML5「4.8.2 The iframe element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。