iframe - インラインフレーム

インラインフレーム(ドキュメント内に他文書の埋め込み)を作る際に使用します。

iframe要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
iframe

iframe要素のHTML4からHTML5への変更点

HTML5では、次の属性が廃止されました。
・frameborder属性
・marginheight属性
・marginwidth属性
・scrolling属性
・longdesc属性
HTML5では、次の属性が新しく追加されました。
・srcdoc属性
・sandbox属性
・seamless属性

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
src インラインフレーム内に表示するアドレスを指定
srcdoc インラインフレーム内に表示するページのコンテンツを指定。
srcdoc属性の値の中にダブルクォーテーション(”)など引用符がでてくる場合は、&quote;などで実体参照文字でエスケープする必要があります。
src属性と同時指定した場合は、srcdoc属性が優先されます。(これによりsrcdoc属性をサポートしていないユーザーエージェントに対してフォローできます)
name インラインフレームの名前
sandbox 悪意のあるコンテンツから被害を受けるのを避けるために、コンテンツの表示に制限を加えることができます。
(フォームとスクリプト、リンク、プラグイン等を無効化)
複数の値を指定するためには、各値をスペース区切りで指定します。
・allow-same-origin - フレーム内のコンテンツの出処が、親ページと同じものとされる。
・allow-forms - フォームを再び有効にします。
・allow-scripts - スクリプトを再び有効にします(ポップアップは無効)
seamless インラインフレーム内のコンテンツを親ページの一部のように表示できます。
width インフレームの横幅
height インフレームの縦幅

「基本」のサンプル

HTMLコード

<iframe src="iframe.html"></iframe>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「基本」のサンプルプレビューを確認

「sandbox属性」のサンプル

HTMLコード

<iframe src="iframe.html" sandbox></iframe>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「sandbox属性」のサンプルプレビューを確認

「sandbox属性 スクリプトの許可」のサンプル

HTMLコード

<iframe src="iframe.html" sandbox="allow-scripts"></iframe>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「sandbox属性 スクリプトの許可」のサンプルプレビューを確認

「srcdoc属性」のサンプル

HTMLコード

<iframe src="iframe.html" srcdoc="<h1>srcdoc属性について</h1><p>srcdoc属性に対応していないブラウザでは、このテキストではなく、src属性で指定した値のドキュメントが表示されます。</p>"></iframe>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「srcdoc属性」のサンプルプレビューを確認

「seamless属性」のサンプル

HTMLコード

<iframe src="iframe.html" seamless></iframe>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「seamless属性」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100304/text-level-semantics.html#the-iframe-element)