iframeタグ
iframeは、インラインフレームを作成するタグです。
解説
インラインフレームはページ内に別ページを表示させる領域のことです。 別のHTML文章でもいいですし、テキストを直接指定してもOKです。
コンテンツ・モデル
| カテゴリー (自カテゴリ) | フロー・コンテンツ フレージング・コンテンツ エンベッディッド・コンテンツ インタラクティブ・コンテンツ |
| コンテキスト (親カテゴリ) | エンベッディッド・コンテンツを許可する場所 |
| コンテンツ・モデル (子カテゴリ) | テキスト |
属性
iframeタグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| src | 対象ページのURLを指定する （例）src="test.html" |
| srcdoc | フレームに表示するテキストを指定する （例）srcdoc="フレームです。" |
| sandbox | フレームに表示するページに制限を設定する ・allow-same-origin：親文書と同じドメインを持つものとする ・allow-popups：ポップアップを許可する ・allow-forms：フォーム送信を許可する ・allow-scripts：スクリプトの実行を許可する ・allow-top-navigation：最上位画面の操作を許可する （例）sandbox="allow-popups allow-scripts" |
| width | フレームのサイズ（幅）を指定する （例）width="300" |
| height | フレームのサイズ（高さ）を指定する （例）height="200" |
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）id="foo" |
| style | スタイルを指定する （例）style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
サンプル
フレームにhoge.htmlを表示する
<iframe src="hoge.html" width="200" height="100"></iframe>
フレームに"フレームです。"と表示する
<iframe srcdoc="フレームです。" width="200" height="100"></iframe>
フレームに表示するページにsandbox制限を指定する
<iframe src="hoge.html" sandbox></iframe>
フレームに表示するページのsandobox制限からスクリプト実行とポップアップを許可する
<iframe src="hoge.html" sandbox="allow-popups allow-scripts"></iframe>
備考
- iframeは「inline frame」の略です。
- srcとsrcdocを両方指定した場合は、srcdocが優先されます。
- sandbox指定の考え方は、属性に「sandbox」を指定すると最も強い制限になります。そこから一部制限を緩めたい場合はsandbox属性値に緩めたい制限を指定します。
