<iframe>要素の使い方・サンプルコード
Sara
目次
<iframe>
<iframe>要素は、現在の HTML ページに別の HTML ページを埋め込むことができます。
デモ：iframe要素
属性
* align, frameborder, longdesc, marginheight, marginwidth, scrolling 属性は非推奨・廃止となっています。
allow
機能ポリシーを使って、使用できる機能を宣言することができます。
| 値 | |
|---|---|
| fullscreen | 全画面モードにすることができます。 |
| payment | Payment Request API の実行を許可することができます。 |
height
フレームの高さをピクセル値で指定します。単位はつけません。既定値は 150 です。
name
フレームの名前を指定します。
referrerpolicy
フレームのリソースにアクセスする時に、どのリファラー（参照元）を送信するかを示します。
| 値 | |
|---|---|
| no-referrer-when-downgrade（既定値） | オリジンに TLS (HTTPS) がない場合は送信しません。 |
| no-referrer | Referer ヘッダーを送信しません。 |
| origin | 送信するリファラーをスキーム、ホスト、ポート番号に制限します。 |
| origin-when-cross-origin | 異なるオリジンへの移動ではスキーム、ホスト、ポート番号に制限し、同一オリジンへの移動にはリファラーのパスも含めて送信します。 |
| same-origin | 同一オリジンにはリファラーを送信しますが、オリジン間リクエストにはリファラー情報を含めません。 |
| strict-origin | セキュリティ水準が同じ場合は文書のオリジンのみをリファラーとして送信し、送信先のセキュリティがより低い場合は送信しません。 |
| strict-origin-when-cross-origin | 同一オリジン間の場合は URL 全体を送信しますが、セキュリティ水準が同じ場合は文書のオリジンのみをリファラーとして送信し、送信先のセキュリティがより低い場合は送信しません。 |
| unsafe-url | オリジンとパスを送信しますが、安全ではありません。 |
sandbox
フレーム内に表示するコンテンツに制限を付けます。
複数の値を指定する場合は半角スペースで区切ります。空文字を指定すると全ての制限を適用します。
| 値 | |
|---|---|
| allow-forms | フレーム内のスクリプト実行・フォームの送信を許可します。 |
| allow-modals | フレーム内でモーダルウィンドウを開くことを許可します。 |
| allow-orientation-lock | フレーム内のスクリーンの向きの操作を許可します。 |
| allow-pointer-lock | フレーム内での Pointer Lock API の使用を許可します。 |
| allow-popups | フレーム内で window.open(), target=”_blank”, showModalDialog() などを使ったポップアップの表示を許可します。 |
| allow-popups-to-escape-sandbox | フレーム内で新しいウィンドウが開かれた場合に sandbox 属性を継承しないようにします。 |
| allow-same-origin | フレーム内のページを呼び出し元と同じオリジンとして扱います。 |
| allow-scripts | フレーム内のポップアップウィンドウ以外のスクリプトの実行を許可します。 |
| allow-top-navigation | フレーム内から読み込み元のページ（最上位の閲覧コンテキスト）に移動・操作することを許可します。 |
| allow-top-navigation-by-user-activation | ユーザーの操作によるものに限り、フレーム内から読み込み元のページ（最上位の閲覧コンテキスト）に移動・操作することを許可します。 |
src
表示するページの URL を指定します。
srcdoc
インラインフレームの内容を直接記述することができます。
ブラウザが srcdoc 属性をサポートしている場合は src 属性を上書きします。* IE と Edge は非対応
width
フレームの幅をピクセル値で指定します。単位はつけません。既定値は 300 です。
グローバル属性
全ての HTML に共通して使用できるグローバル属性はこちら
使用例
例① 基本的な使い方
HTML
<iframe width="300" height="200"
src="https://codeforfun.jp/demo/html/references/tag-iframe.html"></iframe>実行結果
例② srcdoc 属性を使う場合
src 属性に指定した URL ではなく、srcdoc 属性に書いた HTML が表示されます。* IE と Edge は非対応
HTML
<iframe width="300" height="200"
src="https://codeforfun.jp/demo/html/references/tag-iframe.html"
srcdoc="<h1>Hello</h1><p>iframe要素のサンプルです。</p>"></iframe>実行結果
例③ iframe の枠線を消す方法
frameborder 属性は非推奨となっているので、CSS の border プロパティを使用します。
HTML
<iframe width="300" height="200"
src="https://codeforfun.jp/demo/html/references/tag-iframe.html"
style="border:none;"></iframe>実行結果
例④ iframe の枠線のカスタマイズ方法
CSS の border プロパティを使用します。
HTML
<iframe width="300" height="200"
src="https://codeforfun.jp/demo/html/references/tag-iframe.html"
style="border:2px dotted blue;"></iframe>実行結果
対応ブラウザ
関連するタグ
Subscribe
0 Comments
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
>> 詳しいプロフィールはこちら
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
>> 詳しいプロフィールはこちら
