目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
  • でなければならない。

W3C : HTML5.3HTML構文では、テキストの配置が可能だった。

属性
  • グローバル属性
  • src入れ子された閲覧文脈インラインフレーム)に表示するHTML文書等のURL
  • srcdoc入れ子された閲覧文脈インラインフレーム)に表示するHTML文書HTMLコードそのものを記載する(「"」「&」などは実体参照エスケープする。html要素を最上位とするHTML文書でなくてもよく、<p>xxx</p>みたいな断片でもよい)。src属性も指定されてる場合は、srcdoc属性未対応ブラウザでない限り、こちらが優先して表示される。
  • name→当該要素閲覧文脈名。「_」(アンダースコア)で始まらない一文字以上の文字列でなければならない。リンクフォーム閲覧文脈の対象となる。
  • allow入れ子された閲覧文脈インラインフレーム)のFeature Policyの初期状態を指定する。
  • allowfullscreenブーリアン属性。フルスクリーン表示を許容する場合に指定。
  • allowpaymentrequestブーリアン属性入れ子された閲覧文脈インラインフレーム)内のHTML文書等からPayment Request APIの呼び出しを許可する。
  • loading→値は下記とおり。デフォルトは、eager。読み込みを延期するか否かを示す。
    • eagerリソースをすぐに取得する
    • lazy→いくつかの条件が満たされるまでリソースの取得を延期する
  • referrerpolicy→値は下記のとおり。アクセス又はリソース読み込みのときのリファラーヘッダに関するポリシーを指定する。詳細は、Referrer Policyを参照。
    • no-referrerリファラーヘッダを削除し、リファラー情報を送信しない。
    • no-referrer-when-downgradeTLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、リファラー情報を全部送信する。
    • same-origin→非同一オリジンからの要請に対しては、リファラーヘッダを削除し、リファラー情報を送信しない。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • originドメイン部分のみをリファラー情報として送信する(例:「https://example.com/example.html」からのアクセス→「https://example.com/」のみを送信)。
    • strict-originTLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、ドメイン部分のみをリファラー情報として送信する。
    • origin-when-cross-origin→非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • strict-origin-when-cross-originTLSで保護されたクライアントから信用に値し得ない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-downloads→当該HTML文書において、ダウンロード操作を可能とする。
    • 指定されなかった属性値については、それぞれ反対の効果となる。
    • allow-top-navigationallow-top-navigation-by-user-activationの同時指定はしてはならない。
  • widthpx単位の幅を指定する非負整数。単位はつけない。
  • heightpx単位の高さを指定する非負整数。単位はつけない。
  • itemprop属性がある場合は、src属性は必須。

W3C : HTML5.3:下記の属性も許容されていた。

  • allowusermediaブーリアン属性入れ子された閲覧文脈インラインフレーム)内のHTML文書等から、ユーザーのメディアデバイスにアクセスすることを許可する。

W3C : HTML5.3:下記の属性が存在してなかった。

  • allow
  • loading

W3C : HTML5.3:下記のsandbox属性値が存在してなかった。

  • allow-modals
  • allow-orientation-lock
  • allow-popups-to-escape-sandbox
  • allow-top-navigation-by-user-activation
  • allow-downloads
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、なし。
  • デフォルトrole以外では、applicationdocumentimgpresentationnoneを指定可。
視覚系ブラウザデフォルトとして期待されるCSS

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

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

アクセシビリティ関連

私見・補足

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

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

表示確認

ソース1

  以下のiframe要素に当サイトの目次ページを表示
  <iframe src="0mokuji.html" width="800" height="400" name="iframeex" title="iframeサンプル"></iframe>
  
表示結果1
以下のiframe要素に当サイトの目次ページを表示

代替コンテンツがないので、未対応ブラウザでは、何も表示されないかもしれない。

Opera 12インラインフレーム非表示モード)表示のスクリーンショット(表示結果1)
Opera12表示:代替コンテンツがないため何も表示されてない
ソース2: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>
  
表示結果2
以下にsrcdoc属性によるiframe要素を表示。

srcdoc属性未対応の場合は、src属性で指定されているHTML文書が表示される。

IE6表示のスクリーンショット(表示結果2)
IE6表示:src属性で指定されている文書が表示されている

IE7からIE11も同様。