<iframe> - インラインフレーム
目次
概要
- 形式
<iframe src="...">～</iframe>- サポート
- https://caniuse.com/mdn-html_elements_iframe
- カテゴリ
- フローコンテンツ
- フレージングコンテンツ
- エンベデッドコンテンツ
- インタラクティブコンテンツ
- パルパブルコンテンツ
- 親要素
- エンベデッドコンテンツ を子要素に持てるもの
- 子要素
- HTML Living Standard: 無し
- HTML 5.2: 文脈の要求に従ったテキスト
- タグの省略
- 開始タグ:必須 / 終了タグ:必須
- 属性
- グローバル属性
- src
- srcdoc
- name
- sandbox
- allow
- allowfullscreen
- allowpaymentrequest [廃止]
- allowusermedia [廃止]
- width
- height
- referrerpolicy
- loading
説明
iframe は Inline FRAME の略です。src で指定した他のドキュメントを画面中にインラインで表示することができます。<iframe>～</iframe> の間には、<iframe> に対応していないブラウザのためのメッセージを記述します。
HTML4.01 Transitional には採用されたものの、HTML4.01 Strict には採用されませんでしたが、HTML5 には採用されています。
属性
共通属性
- グローバル属性
- 詳細は グローバル属性 を参照してください。
個別属性
- src=url
- LS/H5/H4T/e3/Ch/Fx/Sa/Op/N6
- フレームの中身に表示する文書のURLを指定します。
- srcdoc=contents
- LS/H5/Ch/Fx/Op
- フレームに表示するコンテンツを src属性で別ファイルから指定するのではなく、直接 srcdoc属性で指定します。IE11, Safari 5.1 ではまだサポートされていません。
- name=name
- LS/H5/H4T/e3/Ch/Fx/Sa/Op/N6
- フレームの名前を指定します。
セキュリティ関連
- sandbox=sandbox
- LS/H5/e10/Ch/Fx/Sa/Op
- sandbox 属性を値なしで指定すると、iframeで表示されるコンテンツは別サイトのものと見なされ、フォームのサブミット、スクリプト、トップレベルコンテンツへの操作(window.top.location など)、Cookieなどへのアクセス、ポップアップ(<a target="_blank"> や window.open())、プラグインなどが無効化されます。sandbox="allow-xxx" のように値を指定すると、一部の機能を許可することができます。allow-xxx には、下記の値をスペースで区切って複数指定することが可能です。
- allow-forms
- LS/H5。フォームのサブミットを許可。
- allow-modals
- LS。モーダルダイアログの表示を許可。
- allow-orientation-lock
- LS。スクリーンの方向制御ロックを許可。
- allow-pointer-lock
- LS/H5。ポインターのロックを許可。
- allow-popups
- LS/H5。ポップアップを許可。
- allow-popups-to-escape-sandbox
- LS。サンドボックスが適用されないポップアップ表示を許可。
- allow-presentation
- LS/H5.2。Presentation APIの利用を許可。
- allow-same-origin
- LS/H5。Cookieなどへのアクセスを許可。
- allow-scripts
- LS/H5。ポップアップを除くスクリプトを許可。
- allow-top-navigation
- LS/H5。トップレベルコンテンツへの操作を許可。
- allow-top-navigation-by-user-activation
- LS。ユーザ操作による場合のみ、トップレベルコンテンツへの操作を許可。
- allow=allow
- LS
- フレームのコンテンツに許可する権限のリストを指定します。詳細は 許可リスト を参照してください。
- allowfullscreen
- LS/H5.1
- フレームのコンテンツに requestFullscreen() による全画面フレームを許可するか否かを指定します。allow="fullscreen" でも代用できます。
- allowpaymentrequest
- [非推奨]
LS/H5.2
- フレームのコンテンツに PaymentRequest API を使用することを許可します。HTML5.2 で定義され、HTML Living Standard にも一度採用されましたが、後に破棄されました。代わりに allow="payment ..." を使用します。
https://www.w3.org/TR/payment-request/
- allowusermedia
- [非推奨]
LS
- フレームのコンテンツに getUserMedia() API を使用することを許可します。HTML Living Standard に一度採用されましたが、後に廃止されました。代わりに allow="camera ..." などを使用します。
- referrerpolicy=policy
- LS/H5.2/Ch46/Fx50
- リソースにアクセスした際のリファラー(Referer)送信ポリシーを指定します。
- no-referrer
- 送信しない。
- no-referrer-when-downgrade
- https から http にダウングレードする際には送信しない(デフォルト)。
- same-origin
- 同一オリジン間移動の場合のみ送信する。
- origin
- オリジン情報(プロトコル＋FQDN＋ポート番号)のみを送信する。
- strict-origin
- オリジン情報(プロトコル＋FQDN＋ポート番号)のみを送信するが、ダウングレード時には送信しない。
- origin-when-cross-origin
- オリジンをまたがる場合は、オリジン情報のみを送信する。
- strict-origin-when-cross-origin
- オリジンをまたがる場合は、オリジン情報のみを送信するが、ダウングレード時には送信しない。
- unsafe-url
- 常に送信する。
詳細は下記を参照してください。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Referrer-Policy
- loading=loading
- LS/Ch
- logind="lazy" を指定すると、ページをスクロールしてコンテンツが表示されそうになった時点で読み込みを開始する Lazy-loading を有効にします。サポート状況は CanIUse.com を参照してください。
表示関連
- width=n
- LS/H5/H4T/e3/Ch/Fx/Sa/Op/N6
- フレームの横幅をピクセルまたはパーセンテージで指定します。
- height=n
- LS/H5/H4T/e3/Ch/Fx/Sa/Op/N6
- フレームの高さをピクセルまたはパーセンテージで指定します。
- align=align
- [非推奨] H4T-4T/e3/Ch/Fx/Sa/Op/N6
- フレームを表示する位置を指定します。
- hspace=n
- [非推奨] e3-10
- フレームの周りの横方向の余白をピクセル単位で指定します。
- vspace=n
- [非推奨] e3-10
- フレームの周りの縦方向の余白をピクセル単位で指定します。
- marginheight=n
- [非推奨] H4T-4T/e3/Ch/Fx/Sa/Op//N6
- フレームの上下の余白をピクセル単位で指定します。
- marginwidth=n
- [非推奨] H4T-4T/e3/Ch/Fx/Sa/Op/N6
- フレームの左右の余白をピクセル単位で指定します。
- allowtransparency=bool
- [非推奨] e5.5-9?
- フレームを透明色にする場合は true を指定します。既定値は false です。この機能を有効にするには、フレーム内に表示するドキュメントの <body> の背景色(bgcolor)が "transparent" である必要があります。最近のブラウザでは、デフォルトで透明色になるようです。
- seamless
- [非推奨] H5d
- フレームコンテンツがシームレスに表示されます。フレームの境界線は無く、CSS等も、あたかもフレーム内コンテンツがフレーム外のコンテンツの一部であるように適用されます。HTML5 の草案で検討されていましたが、最終勧告では破棄されました。
ボーダー関連属性
- border=n
- [非推奨] e4-?
- フレームの枠線の太さをピクセル単位で指定します。
- bordercolor=color
- [非推奨] e4-?
- フレームの枠線の色を指定します。
- frameborder=frameborder
- [非推奨] H4T/e3-?/N6
- フレームの枠線を表示する場合は 1 を、表示しない場合は 0 を指定します。IEでは yes と no も指定可能です。
その他の属性
- datafld=datafld
- [非推奨] e4-?
- データバインド機能を用いる際の、データソースの列名を指定します。
- datasrc=datasrc
- [非推奨] e4-?
- データバインド機能を用いる際の、データソースの ID を指定します。
- framespacing=framespacing
- [非推奨] e4-?
- フレーム間の隙間をピクセル単位で指定します。
- longdesc=longdesc
- [非推奨] H4T-4T
- このフレームに関する説明が title 属性で示せないくらいに長文の場合に、その説明ページのURLを指定します。
- scrolling=scrolling
- [非推奨] H4T/e3/Ch/Fx/Sa/Op/N6
- スクロールバーの表示を制御します。HTML5 や HTML Living Standard ではサポートされていません。スタイルシートでスクロールバーを消すには、表示される側のコンテンツで body { overflow: hidden; } を指定する必要があります。
- yes : 常に表示
- no : 常に非表示
- auto : 自動(既定値)
使用例
HTML
<iframe src="https://www.tohoho-web.com/www.htm" width=600 height=200></iframe>
表示
詳細
クリックジャッキング対策(X-Frame-Options)
クリックジャッキング 対策として Webサイトは HTTP ヘッダの X-Frame-Options に下記の値を指定することにより、Web サイトが iframe 内に表示されることを抑止することができます。
- SAMEORIGIN : オリジン(メソッド＋FQDN+ポート番号)が同じであれば表示を許可します。
- DENY : 常に表示を許可しません。
許可リスト(allow)
allow 属性の許可リストには機能名と対象リストを指定します。
allow="feature1 target1a target1b...; feature2 target2a target2b..."
対象リスト (target) には下記を指定します。
- *
- すべてのオリジン。
- 'self'
- 同じオリジン。スキーマ(HTTP/HTTPS)＋サーバ名＋ポート番号が合致するもの。
- 'src'
- src 属性で指定したURLと同じオリジン。
- http://～, https://～
- 指定したURLのオリジン。
- 'none'
- すべてのオリジンで拒否する。
機能名 (feature) には下記などを指定します。
- fullscreen
- Fullscreen API の使用。
- payment
- Payment Request API の使用。
- gyolocation
- Geolocation API の使用。
- camera
- カメラデバイスの使用。
- microphone
- マイクデバイスの使用。
詳細は下記を参照してください。
下記の例は https://www.example.com/ にのみ、カメラとマイクの利用を許可します。
HTML
allow="camera https://www.example.com/; microphone https://www.example.com"
下記の例は、同一オリジンのコンテンツのみに Payment API の使用を許可します。
HTML
allow="payment 'self'"
リンク
Copyright (C) 1996-2022 杜甫々
初版:1996年9月10日 最終更新:2022年1月30日
https://www.tohoho-web.com/html/iframe.htm