最終更新日
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コンテンツの記述箇所で使用できます。
カテゴリ | タグの省略 | 親要素 | 子要素 |
---|---|---|---|
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>