HTML Living Standard　　第１部 HTML　１０ フレーム

 

１０　フレーム

１０．１ フレーム　(iframe)

iframe 要素は、インラインフレームを作る際に使用します。 インラインフレームとは、文書内に別の文書などの閲覧コンテンツを入れ子に配置したもののことです。

iframe 要素

表組みを表す際に使用する。この要素内に、表を構成する各要素を配置していくことになる。

属性

属性名属性値説明必須
srcURIフレーム内に表示する文書のURI×
name文字列フレームの名称×
srcdocHTML文書フレーム内に表示するコンテンツ×
width数値横幅（ピクセル数）（規定値：300）×
height数値高さ（ピクセル数）（規定値：150）×
seamless論理値シームレスなフレーム×
sandboxセキュリティ上の制限×
allow-same-origin親文書と同じドメインを持つものとする
allow-top-navigation最上位のウィンドウの操作を許可する
allow-scriptsスクリプトの実行を許可する
allow-formsフォームの送信を許可する
allow文字列権限ポリシー×

（１） src 属性

src 属性は、文書内に別の文書をフレーム表示する際に使用します。 src 属性の値には、フレーム表示する文書の URI を指定します。

なお、インラインフレームに表示する文書が日本語の場合、ほとんどのブラウザは文字列の途中でもインラインフレームの幅で内部の文書を折り返すようですが、英文は空白などがない限り折り返さないようです。

記述例
<iframe src="example.htm"></iframe>

表示例



（２） name 属性

name 属性は、フレームに名称を付ける際に使用します。<a>要素の target 属性に指定して、HTML文書の表示先として参照することができます。

記述例
<a href="h11001a.htm" target="win">表示</a>

<iframe name="win"></iframe>

「表示」をクリックしてみてください。ファイルの内容が iframe 内に表示されます。

表示例
表示


（３） srcdoc 属性

srcdoc 属性を追加すると、インラインフレームの内容を属性値として記述することができます。HTML で記述しますが、DOCTYPE、html、head、title、body の各要素が省略可能なので、実際には次のように（bodyの内容のみを）記述することができます。また、src 属性と同時に指定した場合は、srcdoc 属性が優先されます。

記述例
<iframe srcdoc="<h1>srcdoc 表示</h1>" src="example.htm"></iframe>

表示例



（４） width 属性と height 属性

width 属性と height 属性を指定すると、インラインフレームの表示サイズを指定することができます。

記述例
<iframe src="example.htm" width="500" height="300"></iframe>

表示例



（５） seamless 属性

seamless 属性を指定すると、親文書との境目がないかのように、インラインフレームを埋め込むことができます。ただし、境界線は消えません。消すためにはスタイルシートで指定します。

記述例
<style>
div.strong {
  background-color: red;
}
</style>


<iframe src="example.htm" seamless></iframe>
example.htm
<div class="strong">赤い？</div>

この例では、親ドキュメントで設定したスタイルシートを iframe 内の div 要素で指定しています。

表示例

（６） sandbox 属性

sandbox 属性を指定することで、iframe 要素によって埋め込まれた HTML 文書に制限をかけることができます（指定しなければ、すべて許可）。

  • そのインラインフレーム内のコンテンツは、（同じドメイン内の文書であったとしても）別ドメインの文書として扱われます。
  • そのインラインフレーム以外のウィンドウを操作できなくなります。また、新規ウィンドウも生成できなくなります。
  • 最上位のウィンドウを操作できなくなります。
  • プラグインを無効化します。
  • 子孫フレームのseamless属性を無効化します。
  • フォームの送信を無効化します。
  • スクリプトの実行を無効化します。
記述例
<iframe src="example.htm" sandbox></iframe>

上記の制限を緩めたい場合は、sandbox属性の値に以下のキーワードを指定します。

○ allow-same-origin

allow-same-origin を指定すると、インラインフレーム内の文書が親文書と同じドメインを持つものとして扱われます。

記述例
<iframe src="example.htm" sandbox="allow-same-origin"></iframe>

○ allow-top-navigation

allow-top-navigation を指定すると、インラインフレーム内のコンテンツが最上位のウィンドウを操作できるようになります。この指定により、例えば target="_top" が指定されたリンクを有効にすることができます。


次は、最上位のウィンドウの操作（target="_top"）を許さない例（左）と許す例（右）です。左側は「別ページに移動」をクリックしても移動しませんが、右側は移動します。

記述例
<iframe src="example.htm" sandbox>

<iframe src="example.htm" sandbox="allow-top-navigation">
表示例

　　移動しない
表示例

　　移動する

○ allow-scripts

allow-scripts を指定すると、インラインフレーム内のコンテンツがスクリプトを実行できるようになります。（ただし、ポップアップは阻止されます）


次は、表示を切り替える Javascript の実行を許さない例（左）と許す例（右）です。

記述例
<iframe src="example.htm" sandbox>

<iframe src="example.htm" sandbox="allow-scripts">
表示例

　　Javascript の実行を許さない
表示例

　　Javascript の実行を許す

○ allow-forms

allow-forms を指定すると、インラインフレーム内のコンテンツがフォーム送信を行えるようになります。


次は、フォームでの送信を許さない例（左）と許す例（右）です。左側は「Enter」を入力しても値を送信しませんが、右側は送信します。その結果、入力した文字列は、その下に表示されます（Javascript を使用していますので、allow-scripts も指定しています。）。

複数のキーワードを指定したい場合は、半角スペースで区切って記述します。

記述例
<iframe src="example.htm" sandbox>

<iframe src="example.htm" sandbox="allow-forms allow-scripts">
表示例

　　フォームでの送信を許さない
表示例

　　フォームでの送信を許す

（７） allow 属性

iframe 要素で利用可能な機能（例：マイク、カメラ、バッテリー、ウェブ共有 API へのアクセスなど）を指定します。

主な機能には以下のものがあります。

機能意味
accelerometer端末の加速度に関する情報を Accelerometer インターフェイスを通じて収集することを許可するかどうか
ambient-light-sensor端末の周囲の環境における光量についての情報を AmbientLightSensor インターフェイスを通じて収集することを許可するかどうか
autoplaymedia や audio 要素が、メディアの自動再生をリクエストすることを無効にするかどうかを制御する
cameraカメラの使用を許可するかどうかを制御する
encrypted-mediaAPI (EME) を使用することを許可するかどうかを制御する
fullscreenElement.requestFullscreen() を使用することを許可するかどうかを制御する
geolocationGeolocation インターフェイスを使用することを許可するかどうかを制御する
gyroscopeGyroscope インターフェイスを通じて、端末の方向に関する情報を収集することを許可するかどうかを制御する
magnetometerMagnetometer インターフェイスを通じて、端末の方向に関する情報を収集することを許可するかどうかを制御する
microphoneオーディオ入力端末を使用することを許可するかどうかを制御する
midiWeb MIDI API を使用することを許可するかどうかを制御する
paymentPayment Request API を使用することを許可するかどうかを制御する
picture-in-picturePicture-in-Picture モードで動画を再生することを許可するかどうかを制御する
usbWebUSB API を使用することを許可するかどうかを制御する
xr-spatial-trackingWebXR Device API を使用して WebXR セッションと対話することを許可するかどうかを制御する

ただし、有効かどうかはわかりません。



記述例
<iframe src="example1.htm" width="220" height="130" allow="picture-in-picture"></iframe>
<iframe src="example1.htm" width="220" height="130"></iframe>
<iframe src="example2.htm" width="220" height="130"></iframe>
example1.htm
<video src="sample.mp4" controls width="200" height="110" muted disablePictureInPicture></video>
example2.htm
<video src="sample.mp4" controls width="200" height="110" muted></video>

左２つで表示している video 要素には disablePictureInPicture 属性があるため、Picture-in-Picture モードを選べません。１つ目には allow="picture-in-picture" がありますが、Picture-in-Picture になりません。

一番右側の video 要素には disablePictureInPicture 属性がないので、Picture-in-Picture モードを選べます。

表示例
video 要素に disablePictureInPicture あり　　　video 要素に disablePictureInPicture なし
　　　allow=picture-in-picture あり　　　allow=picture-in-picture なし　　　allow=picture-in-picture なし