HTML - iframe 要素

概要

名前
iframe
カテゴリー
  • Flow content
  • Phrasing content
  • Embedded content
  • Interactive content
  • Palpable content
配置できる場所
Embedded contentが期待される場所。
コンテンツモデル
なし
説明
iframe 要素は、インラインフレーム (文書内でさらに別の文書を表示させる領域) となる要素です。要素内容は、この要素に未対応の環境およびインラインフレームを表示しない設定になっている環境でのみ表示されます。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLIFrameElement
仕様書
仕様書策定状況コメント
LS:現行の標準
LS:現行の標準
LS:現行の標準
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
1
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

属性

サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
iframe1
align1
allow×××6011.147×60
allowfullscreen11182777
allowpaymentrequest××××××××
frameborder1
height1
longdesc1
marginheight1
marginwidth1
name1
referrerpolicy××505111.138×51
scrolling1
sandbox101745154.2
src1
srcdoc××2520615
width1
○:Support ×:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
allow
iframe の機能ポリシーを指定します。
allowfullscreen
この iframerequestFullscreen() を呼び出して全画面モードにすることができる場合は true に設定します。ただし、この属性は古い属性とみなされており allow="fullscreen" に更新されました。
allowpaymentrequest
異なるオリジンの iframe で Payment Request API の実行を許可する場合は true に設定します。ただし、この属性は古い属性とみなされており allow="payment" に更新されました。
csp
埋め込みリソースを制限するコンテンツセキュリティポリシーです。
height
フレームの高さを CSS ピクセル数で示します。既定値は 150 です。
importance
iframesrc 属性内でのリソースのダウンロード優先度です。許されている値は次の通りです。
auto (既定値)
設定なし。ブラウザはリソースの優先度を決めるために、独自の経験則を使用します。
high
このリソースは、より優先度の低いページリソースよりも前にダウンロードします。
low
このリソースは、より優先度の高いページリソースの後にダウンロードします。
name
埋め込み閲覧コンテキストのターゲット表の名前です。a, form, base 要素における target 属性の値、inputbutton 要素における formtarget 属性の値、window.open() メソッドの windowName 引数の値として使用することができます。
referrerpolicy
フレームのリソースにアクセスする際にどのリファラーを送信するかを示します。
  • no-referrer: Referer ヘッダーを送信しません
  • no-referrer-when-downgrade (既定値): Referer ヘッダーは TLS (HTTPS) のないオリジンには送信しません。
  • origin: 送信するリファラーを、参照しているページのオリジン (スキーム, ホスト名, ポート番号) に限定します。
  • origin-when-cross-origin: 他のオリジンへ送信されるリファラーは、スキーム、ホスト名、ポート番号に制限します。同一オリジンへの移動では、パスも含めます。
  • same-origin: リファラーは同じオリジンには送信しますが、異なるオリジンへのリクエストにはリファラー情報を送信しません。
  • strict-origin: プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信しますが、宛先の安全性が劣る場合 (HTTPS→HTTP) には送信しません。
  • strict-origin-when-cross-origin: 同一オリジンへのリクエストには URL 全体を送信し、プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信し、宛先の安全性が劣る場合 (HTTPS→HTTP) にはヘッダーを送信しません。
  • unsafe-url: リファラーにオリジンおよびパスを含めます (ただし、フラグメント、パスワード、ユーザ名は含めません)。オリジンやパスの情報が TLS で保護されたリソースから安全性の劣るオリジンへ漏えいしますので、これは安全ではありません。
sandbox
フレーム内のコンテンツに追加の制約を適用します。この属性の値は、空にするとすべての制約を適用し、空白区切りのトークンにすると特定の制約を外します。
  • 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: リソースが最上位の閲覧コンテキストに移動できるようにしますが、ユーザの操作によって開始されたものに限ります。
埋め込まれた文書のオリジンが埋め込み先のページと同じである場合、allow-scriptsallow-same-origin を同時に使用すると、埋め込まれた文書から sandbox 属性を削除することができるようになるため、絶対に避けるべきです。これは sandbox 属性をまったく使用しないよりも安全ではなくなります。攻撃者がサンドボックス化した iframe の外側にコンテンツを表示することができる場合、サンドボックス化は無意味です。例えば、閲覧者がフレームを新しいタブで開く場合などです。潜在的なダメージを抑えるため、そうしたコンテンツは別のオリジンから提供するようにもしてください。
src
埋め込むページの URL です。同一オリジンポリシーに従う空白ページを埋め込む場合は、about:blank の値を使用してください。また、プログラムから iframesrc 属性を削除すると (例えば Element.removeAttribute() などで)、 Firefox (バージョン 65 以降)、 Chromium ベースのブラウザ、 Safari/iOS では about:blank が読み込まれます。
srcdoc
埋め込むインライン HTML で、src 属性を上書きします。ブラウザがブラウザが srcdoc 属性に対応していない場合は、src 属性の URL で代替されます。
width
フレームの幅を CSS ピクセル数で示します。既定値は 300 です。

非推奨の属性

align
非推奨。新しいウェブサイトでは使用しないでください。
frameborder
非推奨。新しいウェブサイトでは使用しないでください。
longdesc
非推奨。新しいウェブサイトでは使用しないでください。
marginheight
非推奨。新しいウェブサイトでは使用しないでください。
marginwidth
非推奨。新しいウェブサイトでは使用しないでください。
scrolling
非推奨。新しいウェブサイトでは使用しないでください。

サンプルコード

iframe 要素のサンプルコードは以下のとおりです。

<iframe 
    src="https://murashun.jp/contents.html"
    title="iframe Example"
    width="400"
    height="300">
  <p>Your browser does not support iframes.</p>
</iframe>
iframe 要素のサンプルコード

関連記事

Category:
プログラミング
公開日:
更新日:
Pageviews:
273
Shares:
1
Tag:
HTML