iframeの概要
iframeとはインラインフレームを作る要素です。インラインフレームとは文書内に別の文書などの閲覧コンテンツを入れ子に配置したもののことです。
iframeに使える属性
属性とは<iframe> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。
よく使うグローバル属性
| id | 概要 | 要素に対してID固有の識別名を付けることができます。 |
|---|---|---|
| 属性の値 | 英字から始まる英数字 | |
| class | 概要 | 要素に対して分類名を付けることができます。 |
| 属性の値 | 英字から始まる英数字 | |
| style | 概要 | 要素に対して直接スタイルを指定することができます。 |
| 属性の値 | スタイルシートのコード |
iframeで使う属性
| src | 概要 | 埋め込むコンテキストのパスを指定する属性です。 |
|---|---|---|
| 属性の値 | 埋め込むページのURL | |
| importance | 概要 | src属性内のリソースのダウンロード優先度を定義できます。 |
| 属性の値 | auto,high,low | |
| srcdoc | 概要 | src属性を上書きします。ブラウザーがsrcdocに対応しない場合はsrc属性のURLが表示されます。 |
| 属性の値 | 埋め込むページのURL | |
| width | 概要 | フレームの横幅を指定できます。 |
| 属性の値 | 数値 | |
| height | 概要 | フレームの高さを指定できます。 |
| 属性の値 | 数値 | |
| name | 概要 | フレームの名称を指定できます。 |
| 属性の値 | 文字列 | |
| sandbox | 概要 | 指定をなしにするとCookieなどへのアクセス、ポップアップ、プラグインなどが無効化されます。 |
| 属性の値 | allow-forms、allow-modals、allow-orientation-lock、allow-pointer-lock、allow-popups、allow-popups-to-escape-sandbox、allow-presentation、allow-same-origin、allow-scripts、allow-top-navigation、allow-top-navigation-by-user-activation | |
| referrerpolicy | 概要 | リソースにアクセスした際の送信するリファラーを指定できます。 |
| 属性の値 | no-referrer、no-referrer-when-downgrade、same-origin、origin、strict-origin、origin-when-cross-origin、strict-origin-when-cross-origin、unsafe-url |
スポンサードサーチ
<iframe>の使い方
ブラウザ対応状況
| ブラウザの対応（PC) | |
|---|---|
| Chrome | あり |
| Safari | あり |
| Internet Explorer | あり |
| Edge | あり |
| Firefox | あり |
| Opera | あり |
| ブラウザの対応（SP) | |
| Chrome | あり |
| Safari | あり |
| Samsung Internet | あり |