<iframe>インラインフレームを表示

<iframe>タグでは、ページ内にインラインフレーム(別のブラウジングコンテキスト)を設定し、他のページのコンテンツを組み込んで表示することができます。 例えば、HTML文書内に特定の領域を設定し、そこに別のHTML文書を組み込む事などが可能です。

<iframe>はHTML4.01からある要素ですが、新しい属性が追加されましたので、詳しい使い方に関しては下記を参照して下さい。

HTML5での変更点と使い方

HTML5のiframe要素では、longdesc属性、scrolling属性、frameborder属性、marginwidth属性、marginheight属性、align属性が廃止されています。
またsrcdoc属性、sandbox属性が追加されました。

src属性とsrcdoc属性について

src属性で、iframe要素内に表示するwebページのURLを指定します。 srcdoc属性では、iframe要素内に表示するwebページのコンテンツを指定します。 この時、srcdoc属性の値そのものに、HTMLを含めた内容を記述することができます。 こうする事で新しくHTML文書を用意する必要がなくなります。

またsrcdoc属性に指定する内容にダブルクォーテーション「"」などの引用符がある場合は、&quot;というように記述します。 アンパサンド「&」がある場合には、&amp;amp;というように記述する必要があります。

src属性とsrcdoc属性の両方を指定した場合、srcdoc属性が優先されます。 ですが、srcdoc属性がサポートされていないブラウザでは、src属性で指定したwebページが表示されます。

<iframe srcdoc="<p>フレームに表示する内容</p>" src="sample.html"></iframe>

sandbox属性でiframe内の動作に制限をかける

sandbox属性では、インラインフレーム内に表示するコンテンツにセキュリティ上の動作制限をかけることができます。

これは悪意のあるスクリプトなどが埋め込まれるのを防ぐためで、sandbox属性の値を「なし」で指定するとインラインフレームで表示されるコンテンツは別のものと見なされ、スクリプト、プラグイン、リンクターゲットなどが無効化されます。

sandbox属性の制限について
制限範囲 説明
リンクターゲット self以外のtarget属性を無効にし、Javascriptなどでの新規ウィンドウ作成等もさせません。
プラグイン embed要素、object要素を利用したプラグインの再生・実行を無効化します。
スクリプト スクリプトを無効化します
その他 フレーム内でのsubmitボタンを無効化し、Cookieなどへのアクセス、更新などを無効化します。またその他の様々な制限をかけます。

sandbox属性での制限を一部許可したい場合は、次の値をsandbox属性の値に指定します。 複数の値を指定する場合は、半角スペースで区切ります。

制限を一部許可する場合の属性値
説明
allow-same-origin 親のHTML文書と同じドメインを持つものとします。スクリプトに関する制限が主に解除されます。
allow-scripts スクリプトを有効にします。(ポップアップは無効)
allow-forms submitボタン(フォームの送信)を有効にします
allow-top-navigation フレーム内のコンテンツから、親のコンテンツの操作を許可します
allow-pointer-lock Pointer Lock APIを許可します。
allow-popups ポップアップを許可します。

seamless属性とiframe要素の注意点

seamless属性は、フレーム内のコンテンツをあたかも1つのHTML文書であるかのように表示させられる属性です。 ですが最終勧告で破棄されています。

またHTML5のiframe要素の内容は、意味を持たないテキストとして扱われます。 ですがiframe要素に対応していない古いブラウザでは、代替コンテンツとして扱われる点に注意して下さい。

書式

  • <iframe 属性="値">~</iframe> ……… インラインフレームを表示する

属性

src="url" インラインフレーム内に表示するページのURLを指定
srcdoc="" インラインフレーム内に表示する内容を属性値に指定
name="" フレーム名を指定
sandbox="" フレーム内の動作に制限をかける
seamless 親の文書と境目なくシームレスに表示される。(最終勧告で破棄)
width="" インラインフレームの幅をピクセル数で指定
height="" インラインフレームの高さをピクセル数で指定

使用した時の例

<p><iframe src="sample.html" width="300" height="200"></iframe></p>

ブラウザ上の表示例

対応ブラウザなどのデータ

形式 <iframe src="">~</iframe> カテゴリ フローコンテンツ,フレージングコンテンツ,エンベデッドコンテンツ,インタラクティブコンテンツ,パルパブルコンテンツ
親要素 エンベデッドコンテンツが期待される場所 子要素 テキスト
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~