iframe
<iframe> はWeb ページ内に別のページを埋め込むことができます。インラインフレームと呼ばれることもあります。
- 分類
- フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ、対話型コンテンツ、知覚可能コンテンツ
- 内包できるもの
- なし
属性
フレームの高さ
height=”” でフレームの高さをピクセルで指定します。
<iframe height="300"></iframe>フレームの名称
name=”” 属性ではフレームの名称を指定します。この名称は <a>, <form>, <base> 要素における target 属性の値として指定する際にも利用できます。
セキュリティ上の制約
sandbox=”” では、フレーム内のコンテンツに制約を適用します。値が空の場合はすべての制約を適用し、空白区切りでワードを指定するとその制約を解除できます。
- allow-downloads-without-user-activation
- ユーザーの操作なしでダウンロードが発生することを許可する
- allow-downloads
- ユーザーの操作により発生するダウンロードを許可する
- allow-forms
- リソースがフォームを送信することを許可する
- allow-modals
- リソースがモーダルウィンドウを開くことができるようにする
- allow-orientation-lock
- リソースがスクリーンの方向をロックすることができるようにする
- allow-pointer-lock
- リソースが Pointer Lock API を使用できるようにする
- allow-popups
- (window.open(), target=”_blank”, showModalDialog() のような) ポップアップを許可する
- allow-popups-to-escape-sandbox
- サンドボックス化された文書が、サンドボックスを継承しないウィンドウを開けるようにする。安全に広告をサンドボックス化し、同じ制約を広告のリンク先のページに強制しないようにすることができる
- allow-presentation
- リソースがプレゼンテーションセッションを開始できるようにする
- allow-same-origin
- フレーム内の文書を親文書と同じドメインとして扱う
- allow-scripts
- リソースがスクリプト (ただし、ポップアップウィンドウを作成しないもの) を実行できるようにする
- allow-storage-access-by-user-activation
- リソースが Storage Access API で親のストレージ容量へのアクセスを要求できるようにする
- allow-top-navigation
- リソースが最上位の閲覧コンテキスト (_top という名前のもの) に移動できるようにする
- allow-top-navigation-by-user-activation
- リソースが最上位の閲覧コンテキストに移動できるようになるが、ユーザーの操作によって開始されたものに限る
フレームで表示する URL を指定
src=”” でフレーム内に表示する URL を指定します。
<iframe src="example.html"></iframe>埋め込むインライン HTML で src 属性を上書きする
srcdoc=”” が指定されるとその値がフレーム内に表示され src=”” より優先されます。
<iframe src="example.html" srcdoc="<h3>サンプル</h3><p>サンプルのプレビュー</p>"></iframe>フレームの幅
width=”” でフレームの幅をピクセルで指定します。
<iframe width="500"></iframe>