リファレンス

<iframe>要素の使い方・サンプルコード

 

<iframe>

<iframe>要素は、現在の HTML ページに別の HTML ページを埋め込むことができます。

デモ:<iframe> 要素

 
 
 

属性

* align, frameborder, longdesc, marginheight, marginwidth, scrolling 属性は非推奨・廃止となっています。
 

allow

機能ポリシーを使って、使用できる機能を宣言することができます。

fullscreen全画面モードにすることができます。
paymentPayment Request API の実行を許可することができます。

 

height

フレームの高さをピクセル値で指定します。単位はつけません。既定値は 150 です。
 

name

フレームの名前を指定します。
 

referrerpolicy

フレームのリソースにアクセスする時に、どのリファラー(参照元)を送信するかを示します。

no-referrer-when-downgrade(既定値)オリジンに TLS (HTTPS) がない場合は送信しません。
no-referrerReferer ヘッダーを送信しません。
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="350" height="250"
    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>
実行結果


 
 
 

対応ブラウザ

 
 
 

関連するタグ

 

HTML タグ一覧はこちら
 

ABOUT ME
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
Code for Fun プログラミング講座

 

 
Code for Fun プログラミング講座では「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで学ぶことができます。

  • 何か一つ形にしてみたい!
  • 次に何をして良いか分からない…
  • プログラミングに挫折しそう…

という方にオススメです。

詳しくみる

guest

CAPTCHA


0 Comments
Inline Feedbacks
View all comments
0
この記事にコメントするx