インラインフレーム iframe

更新日：2022年03月10日

作成日：2016年04月04日

概要

iframe 要素 (インラインフレーム要素) を使うと、現在のページに他の HTML ページを埋め込むことができます。

iframe 要素は、HTML 内に別の HTML を入れ子にすることができる要素です。

HTML の <iframe> 要素 (またはHTML インラインフレーム要素) は、ブラウジングコンテキストの入れ子を表現し、事実上現在のページに他の HTML ページを埋め込むことができます。
(https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe)より
ブラウジングコンテキスト (browsing context)

HTML5 では、閲覧者に文書が表示される環境（ウィンドウやタブ等）のことをブラウジング・コンテキストと呼びます（ブラウザの１つのタブが１つのブラウジング・コンテキスト）。iframe 要素によって定義されるフレームも、１つのブラウジング・コンテキストになります。

通常、ブラウジングコンテキストは表示する Web ページによって個々のウィンドウ（タブ）が表示されますが、iframe 要素などで埋め込まれた Web ページのブラウジングコンテキストは入れ子構造になります。

iframe 要素は、開始と終了タグの両方が必要です。

<iframe 属性="属性値" ・・・></iframe>

基本的な属性には、以下のようなものがあります。

以下は、幅と高さを指定して他の HTML（https://webdesignleaves.com）を表示する例です。

<iframe src="https://webdesignleaves.com" width="500" height="300"></iframe>

<iframe>～</iframe>の内容

HTML4.01では、iframe 要素の開始タグと閉じタグの間には、 インラインフレームをサポートしていない環境向けの内容を記述することになっていましたが、 HTML5では、<iframe>～</iframe>に内容を指定しても、何も意味を持たないことになっています。

但し、インラインフレームをサポートしていない古いブラウザなどの環境に配慮するなら、<iframe>～</iframe>の中に何らかのメッセージを記述しても良いと思います。 

<iframe src="https://webdesignleaves.com" width="500" height="300">このページは iframe 対応ブラウザでご覧ください。</iframe>

以下は HTML4 までの属性です。（HTML5 で指定しても機能するようですが、CSS で指定したほうが良いでしょう）

HTML4 の属性
属性 意味
frameborder 値が 1 (デフォルト) なら、ブラウザはこのフレームと他のすべてのフレームの間にボーダーを描きます。値が 0 なら、他フレームとの間にボーダーは描かれません。
scrolling フレームにスクロールバー（もしくは他のスクロール用機能）をいつ表示するか決めるための列挙属性:
  • auto: 必要なときだけ表示
  • yes: 常にスクロールバーを表示
  • no: スクロールバーを一切表示しない
marginheight フレームのコンテンツと top および bottom のマージン間の、ピクセル単位の余白量
marginwidth フレームのコンテンツと left および right のマージン間の、ピクセル単位の余白量
longdesc フレームの長い説明の URI
align
非推奨		 フレームを含むコンテキストに対する、フレームの整列方法を指定

以下は、CSS でボーダーとマージンを設定しています。中央寄せするために、「display: block;」でブロック要素にして、左右のマージンを「auto」に指定しています。

また、スクロールバーは「overflow: hidden;」では、消すことができないようなので、HTML4 の属性「scrolling="no"」を指定しています。

<iframe id="iframe_sample1" src="https://webdesignleaves.com" width="500" height="320" scrolling="no"></iframe>
#iframe_sample1 {
  border: 1px solid #CCC;
  border-radius: 4px;
  margin: 20px auto;
  display: block;
}

インラインフレームの target 属性

以下のように、「iframe_01.html」というページを読み込んで表示する場合、「iframe_01.html」に記述されているリンクの「target 属性」の値により、リンクをクリックした場合の動作が異なります。

<iframe src="../samples/iframe_01.html" width="500" height="160"></iframe>

iframe_01.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>iframe sample</title>
</head>
<body>
<ul>
  <li><a href="http://api.jquery.com/">jQuery API</a></li>
  <li><a href="http://www.apple.com/jp/" target="_blank">Apple</a></li>
  <li><a href="http://web.mta.info/maps/submap.html" target="_top">MTA Subway Map</a></li>
</ul>
</body>
</html>

1番目のリンクをクリックした場合は、ブラウザによっては「戻る」ボタンで元の表示に戻す必要があるかもしれません。「リフレッシュ」ボタンでは、元に戻らない場合もあります。

HTML5 での属性

iframe 要素の HTML5 での属性には以下のようなものがあります。これらの属性については、まだ未対応のブラウザもあるので注意が必要です。また、「HTML4から」とあるものは、HTML4 から継続して利用可能な属性です。

iframe 要素の HTML5 での属性
属性 意味
height フレームの高さをピクセルで指定。（HTML4から）
width フレームの幅をピクセルで指定。（HTML4から）
name フレーム（ブラウジングコンテキスト・埋め込まれた文書）の名前を指定。
<a> や <form> 要素の target 属性の値、もしくは <input> や <button> 要素の formtarget 属性の値として使えます。（HTML4から）
src 埋め込むページの URL（HTML4から）
srcdoc 埋め込むコンテンツの HTML を記述します。この属性は、sandbox および seamless 属性とともに使用すると想定されています。ブラウザが srcdoc 属性をサポートする場合は、src 属性で指定したコンテンツより優先します。ブラウザが srcdoc 属性をサポートしない場合は、src 属性でファイルを指定していれば、それを代わりに表示します。また、「"」および「&」は文字参照（それぞれ「&quot;」「&amp;」）とする必要があります。
sandbox この属性を指定すると、インラインフレーム内のコンテンツにセキュリティ上の制限をかけることができます。
seamless この属性を指定すると、境界線が表示されず、あたかも親文書の一部のように埋め込まれます。
グローバル id, class, title, style 等のグローバル属性も指定できます。（HTML4から）

name 属性

iframe 要素の「name 属性」を使って、インラインフレームに任意の名前を付けてることにより、そのインラインフレームを識別することができます。使い方としては、<a> 要素などの target 属性の値に指定して、ターゲットとすることができます。

<ul>
  <li>
    <a href="http://api.jquery.com/" target="target_frame1">jQuery API</a>
  </li>
  <li>
    <a href="https://www.webdesignleaves.com/" target="target_frame1">WDL</a>
  </li>
  <li>
    <a href="http://web.mta.info/maps/submap.html" target="target_frame1">MTA Subway Map</a>
  </li>
</ul>
<iframe src="http://api.jquery.com/" name="target_frame1" width="600" height="400"></iframe>

srcdoc 属性

srcdoc 属性を指定すると、インラインフレームの内容（HTML）を属性値として記述することができます。

srcdoc 属性に HTML を記述する場合、以下のことに注意する必要があります。

  • 「"」および「&」は文字参照（それぞれ「&quot;」「&amp;」）とする必要があります。
  • <!DOCTYPE html> <html> <head> <title> <body>は省略して、<body>の中身だけを記述することができます。
  • src 属性と srcdoc 属性が同時に指定された場合は、srcdoc 属性が優先されます。
  • ブラウザが srcdoc 属性をサポートしない場合は、src 属性でファイルを指定していれば、それを代わりに表示します。

以下のサンプルは、srcdoc 属性に HTML を記述し、src 属性に同じ内容の HTML ファイルを指定しています。

<iframe width="500" height="200" src="../samples/srcdoc.html" srcdoc="<h3>iframe srcdoc 属性</h3>
<p>srcdoc 属性を指定すると、インラインフレームの内容（HTML）を属性値として記述することができます。</p>"></iframe>

srcdoc.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>iframe srcdoc属性</title>
</head>
<body>
<h3>iframe srcdoc属性</h3>
<p>srcdoc 属性を指定すると、インラインフレームの内容（HTML）を属性値として記述することができます。</p>
</body>
</html>

sandbox 属性

sandbox 属性を指定すると、iframe 要素で読み込むコンテンツが制限され、安全性が向上します。

制限されるコンテンツは以下のようなものです。

  • ユニークなオリジンとして扱われ、同一オリジンで利用できる機能が無効になります。（インラインフレーム内のコンテンツは、同じドメイン内の文書であっても別ドメインの文書として扱われます）
  • フォーム、スクリプト、ポップアップが無効になります。
  • リンクが他のブラウジング・コンテキストをターゲットにできないようになります。（例えばリンクにtarget="_top"を指定しても動作しない）
  • embed 要素、object 要素、applet 要素などによるプラグインが無効になります。

値を指定していないで sandbox 属性を設定（記述）すると、上記のすべての制限が適用されます。

<iframe src="https://webdesignleaves.com" width="500" height="300" sandbox></iframe>

以下の例の場合、検索機能が働かなかったり、Webフォントが表示されない、Ajax の機能が働かない、メディアクエリが機能しないなどが確認できます。

制限の一部解除

sandbox 属性の値にキーワードを指定すると、制限の一部を解除することができます。

キーワードは半角スペースで区切って複数指定することが可能です。

sandbox 属性キーワード
キーワード 意味
allow-same-origin 埋め込まれた文書を固有のオリジンとはせず、親文書と同じオリジンを持つものとします。（親文書と同じドメインを持つものとします）
allow-top-navigation 埋め込まれた文書から別のブラウジングコンテキストを指しているリンクを有効にします。例えば target="_top" が指定されたリンクを有効にすることができます。（最上位のウィンドウの操作を許可します）
allow-forms 埋め込まれた文書からのフォーム送信を許可します。
allow-popups 埋め込まれた文書からのポップアップを許可します。
allow-scripts 埋め込まれた文書からのスクリプトの実行を許可します。

以下は親文書と同じオリジンを持つものとするのと、スクリプトの実行を許可する例です。

<iframe src="https://webdesignleaves.com" width="500" height="300" sandbox="allow-same-origin allow-scripts"></iframe>

seamless 属性

この属性を指定された iframe 要素は、親のブラウジング・コンテキスト（iframeの呼び出し元）と同じように扱われ、境界線は表示されず、あたかも親文書の一部のように埋め込まれます。また、親文書から埋め込まれた文書に対してスタイルを適用したりできます。

seamless 属性を使用するには、呼び出し元のブランジング・コンテキストと読み込み先のブラウジング・コンテキストのオリジンが同じである必要があります。

まだ、ほとんどのブラウザが未対応です。

<iframe src="../samples/iframe_01.html" width="500" height="160" seamless></iframe>