目次に戻る

iframe要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
  • 空でなければならない。
属性
  • グローバル属性
  • src→入れ子された閲覧文脈（インラインフレーム）に表示するHTML文書等のURL
  • srcdoc→入れ子された閲覧文脈（インラインフレーム）に表示するHTML文書のHTMLコードそのものを記載する（「"」「&」などは実体参照でエスケープする。html要素を最上位とするHTML文書でなくてもよく、<p>xxx</p>みたいな断片でもよい）。src属性も指定されてる場合は、srcdoc属性未対応ブラウザでない限り、こちらが優先して表示される。
  • name→当該要素の閲覧文脈名。「_」（アンダースコア）で始まらない一文字以上の文字列でなければならない。リンク・フォームの閲覧文脈の対象となる。
  • allow→入れ子された閲覧文脈（インラインフレーム）のPermissions Policyの初期状態を指定する。
  • allowfullscreen→ブーリアン属性。フルスクリーン表示を許容する場合に指定。
  • loading→値は下記とおり。デフォルトは、eager。読み込みを延期するか否かを示す。
    • eager→リソースをすぐに取得する
    • lazy→いくつかの条件が満たされるまでリソースの取得を延期する
  • referrerpolicy→値は下記のとおり。アクセス又はリソース読み込みのときのリファラーヘッダに関するポリシーを指定する。詳細は、Referrer Policyを参照。
    • no-referrer→リファラーヘッダを削除し、リファラー情報を送信しない。
    • no-referrer-when-downgrade→TLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、リファラー情報を全部送信する。
    • same-origin→非同一オリジンからの要請に対しては、リファラーヘッダを削除し、リファラー情報を送信しない。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • origin→ドメイン部分のみをリファラー情報として送信する（例：「https://example.com/example.html」からのアクセス→「https://example.com/」のみを送信）。
    • strict-origin→TLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、ドメイン部分のみをリファラー情報として送信する。
    • origin-when-cross-origin→非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • strict-origin-when-cross-origin→TLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合で、非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。その他の場合で、同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • unsafe-url→リファラー用に削った全部情報を送信する。
  • sandbox→値は下記のとおり。半角スペース区切りで複数指定可。インラインフレーム内のHTML文書に対する制限を指定する。
    • allow-forms→当該HTML文書のフォームを有効にする。
    • allow-modals→当該HTML文書のモーダルダイアログを有効にする。
    • allow-orientation-lock→当該HTML文書において、画面の向きをロックする機能を有効にする。
    • allow-pointer-lock→当該HTML文書のポインタロック機能を有効にする。
    • allow-popups→当該HTML文書のポップアップ機能を有効にする。
    • allow-popups-to-escape-sandbox→当該HTML文書から新たに生じた閲覧文脈（新規のウィンドウなど）に対して、sandbox属性の状態を継承させない。
    • allow-presentation→当該HTML文書において、Presentation APIの使用を可能とする。詳細は、Presentation APIを参照。
    • allow-same-origin→親の閲覧文脈のHTML文書と当該HTML文書を同一オリジンとして扱う。
    • allow-scripts→当該HTML文書のスクリプトを有効にする。
    • allow-top-navigation→当該HTML文書から親の閲覧文脈のHTML文書に対する操作を可能とする。
    • allow-top-navigation-by-user-activation→当該HTML文書において、ユーザーの操作に基づいて親の閲覧文脈のHTML文書に対する操作を可能とする（ユーザーの操作に基づかない自動的なものは不可）。
    • allow-top-navigation-to-custom-protocols→当該HTML文書でカスタムプロトコルを有効にする。
    • allow-downloads→当該HTML文書において、ダウンロード操作を可能とする。
    • 指定されなかった属性値については、それぞれ反対の効果となる。
    • allow-top-navigationとallow-top-navigation-by-user-activationの同時指定はしてはならない。
    • allow-popups又はallow-top-navigationが指定されている場合は、allow-top-navigation-to-custom-protocolsを指定してはならない。
    • allow-scriptsとallow-same-originを同時指定すると、インラインフレーム内のHTML文書からスクリプトにより、sandbox属性そのものを削除することが可能になってしまうので、注意。
  • width→px単位の幅を指定する非負整数。単位はつけない。
  • height→px単位の高さを指定する非負整数。単位はつけない。
  • itemprop属性がある場合は、src属性は必須。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、なし。
  • デフォルトrole以外では、application、document、img、presentation、noneを指定可。
視覚系ブラウザのデフォルトとして期待されるCSS

  iframe {border: 2px inset;}
視覚系ブラウザにおいて期待されるレンダリング
  • 置換要素となる。
  • 入れ子された閲覧文脈に、指定されたHTML文書を表示。
  • height属性値及びwidth属性値をレンダリングのヒントとして用いる。
ユーザーエージェントに対する特記事項
  • sandbox属性値にallow-top-navigationとallow-top-navigation-by-user-activationが同時に指定されていた場合（非準拠）は、前者のみが効果を有する。
意味・用法

入れ子された閲覧文脈（インラインフレーム）を表す。

アクセシビリティ関連

私見・補足

インラインフレームに表示する文書は、HTML文書が想定されているわけだが、他にも、仕様には明示されてはいないが、プレーンテキストファイルや視覚系ブラウザでのレンダリングが想定されている文書（MathML文書、XSLTをかませたXML文書など）は、表示できそうである。画像や動画を表示できるものもあるようだ。

スタイルシートを駆使してiframe要素2個（あるいは2個以上）をうまく配置すれば、廃止されたframeset要素によるフレーム構文と類似したものの実現は可能（サンプル）。

表示確認

ソース１

  以下のiframe要素に当サイトの目次ページを表示
  <iframe src="0mokuji.html" width="800" height="400" name="iframeex" title="iframeサンプル"></iframe>
表示結果１
以下のiframe要素に当サイトの目次ページを表示
ソース２：srcdoc属性使用

  以下にsrcdoc属性によるiframe要素を表示。
  <iframe srcdoc="&lt;p&gt;srcdoc属性に対応してます。&lt;/p&gt;" src="./sample/nonsrcdoc.html" width="800" height="100" name="iframeex2" title="iframe要素srcdoc属性使用サンプル"></iframe>
表示結果２
以下にsrcdoc属性によるiframe要素を表示。