iframe : インラインフレーム

カテゴリ

例

<!-- sandbox化しほとんど何もできない状態のiframeに、srcdoc属性からHTML文書を注入 -->
<iframe sandbox srcdoc="<p>hey that's earl's table.</p>"></iframe>

説明

文書内に指定されたサイズのエリアを設けて別の文書を表示する。

仕様書には、中身の詳しい説明は「下を見ろ」って書いてあって、読み進めると「中身なんて反映するわけねーだろバーカ」って書いてあった。なんやねん。

ブラウザやブラウジングコンテキスト内に読み込むURLによってはX-Frame-Options HTTPヘッダーを設定しないと動かない事があるが、それについては別途検索してみてくれ。

属性 属性値の見方

allow  未来[列挙型]( [許可リスト])* (; [列挙型]( [許可リスト])*)*
たぶん乱立しているallowナントカ系属性をまとめて設定できるようにする試み。Feature Policy。

[列挙型]には、fullscreen/payment等の許可したい機能のキーワードが入る。仕様書も鋭意製作中で可能なキーワードの一覧は揃っていない模様。

[許可リスト]には、*（全許可）、'self'（自身と同じオリジンのみ許可）、'none'（全拒否）、http://example.com等の許可するオリジンが入る。

鋭意製作中なのでまだ確認はしない（というかChrome系しか対応していない模様）。

allowfullscreen  new(真偽値)chrome ✗ opera ✗ edge ✗ ios ✗ android ✗
フルスクリーンを許可。Fullscreen APIっていうのがあって、それが利用できる。
allowpaymentrequest  new(真偽値)chrome ✗ firefox ✗ opera ✗ edge ✗
Payment Requestインタフェースの利用を許可。ただ、現時点ではどうもあっても無くても関係ないみたい…
allowusermedia  未来(真偽値)edge ✗ ie ✗ safari ✗ ios ✗ android ✗
iframe内からのウェブカムとかマイクへのアクセスを許可する。
height  変更[正の整数]|0
HTML5でパーセンテージ指定が不可になった。
name[文字列]
フレーム（というかウィンドウというかブラウザーコンテキストというか）に名前を付ける。この名前を例えばaのtarget属性で指定する事で、そのフレームでリンク先を表示する事ができる。
referrerpolicy  new[列挙型]edge ✗ safari ✗ ios ✗
リファラー（REFERER）をリクエスト時に送信するかどうかを指定する。Referrer Policyに則ったキーワードを指定する。
sandbox  new(空欄)|[列挙型]( [列挙型])*firefox △ ie △ safari △ ios △ android △
フレームで読み込む内容に制限をかける。値には制限を解除する項目を列挙する。つまり、値を指定しない場合は以下の項目がすべて制限される。
  • allow-forms: フォームを有効化
  • allow-modals 未来: JavaScriptが生成する各種ダイアログを許可
  • allow-orientation-lock 未来: 画面回転のロックを許可。スマホとかタブレットとかでよくあるアレ。Screen Orientation API
  • allow-pointer-lock: マウスカーソルの非表示を許可。Pointer Lock。
  • allow-popups: ポップアップを許可。sandbox属性値を引き継ぐ。
  • allow-popups-to-escape-sandbox 未来: ポップアップを許可。sandbox属性値を引き継がない。
  • allow-presentation: Presentation APIを許可
  • allow-same-origin: 遷移先のリソースをその通りのオリジンとみなす
  • allow-secure-context 未来: Secure Contextになる事を許可。現時点ではメジャーなブラウザはこれが無くても許可されており、未サポート。
  • allow-scripts: スクリプトの実行を許可
  • allow-top-navigation: ユーザー操作でなくとも最上位ウィンドウの遷移や最上位ウィンドウから閉じるのを許可。
  • allow-top-navigation-by-user-activation 未来: ユーザー操作の最上位ウィンドウの遷移や最上位ウィンドウから閉じるのを許可。
src[URL]
フレーム内に読み込むリソースのURL
srcdoc  new[文字列]edge ✗ ie ✗
フレーム内に表示するHTMLドキュメント。doctypeは任意。なので結局それなりに大きくなりそうだが、html/head/bodyは特定の条件下で省略可能なので、大抵の場合はそれなりに短く書ける。属性値なので"と&はエスケープする必要がある。

src属性と同時に指定可能で、その場合src属性はsrcdoc属性をサポートしていないブラウザのためのフォールバックになる。

width  変更[正の整数]|0
HTML5でパーセンテージ指定が不可になった。
align
代わりにCSSを使用
frameborder
代わりにCSSを使用
longdesc
代わりにa要素を使って説明にリンクする等を検討
marginheight
代わりにCSSを使用
marginwidth
代わりにCSSを使用
scrolling
代わりにCSSを使用