最終更新日

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」外部リンク
HOME