iframe

提供: ASCII.jp HTMLリファレンス

ver.8~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味 インラインフレーム
読み方 アイフレーム/インライン・フレーム

カテゴリー

フロー・コンテンツ/フレージング・コンテンツ/エンベディッド・コンテンツ/インタラクティブ・コンテンツ

親にできる要素/カテゴリー

エンベディッド・コンテンツが期待される個所

子にできる要素/カテゴリー

iframe要素の仕様に準拠したテキスト

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

属性 概要
src URL インラインフレーム内に表示するページのアドレス
srcdoc 文字列 インラインフレーム内に表示するコンテンツ
name 文字列 ブラウジングコンテキスト名
sandbox 文字列 サンドボックス動作
seamless 論理値 シームレス動作の設定
width 文字列 インラインフレームの幅
height 文字列 インラインフレームの高さ

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 iframe要素はページ内にインラインフレーム(別のブラウジングコンテキスト)を設定し、他のページのコンテンツを組み込んで表示するときに使います。

 src属性は、インラインフレーム内に表示するWebページのアドレス(URL)を指定します。srcdoc属性は、インラインフレーム内に表示するページのコンテンツを指定します。src属性とsrcdoc属性の両方を指定した場合、srcdoc属性が優先されます。srcdoc属性をサポートしないWebブラウザーでは、src属性で指定したWebページが表示されます。

 sandbox属性は、インラインフレーム内に表示するコンテンツに、セキュリティ関係の動作制限をかけます。表の値を指定します。複数の値を指定する場合、スペースで区切ります。

動作制限
allow-same-origin インラインフレーム内のページが、親と同じオリジンを持つものとされる
allow-scripts インラインフレーム内のページのスクリプトを有効にする(ただし、ポップアップは禁止)
allow-forms インラインフレーム内のページのフォームを有効にする
allow-top-navigation インラインフレーム内のコンテンツから、親のコンテンツのナビゲーションを制御できる

 seamless属性は論理属性です。この属性を指定すると、iframe内のコンテンツが、親の文書と境目なく表示されます。

 width/height属性は、インラインフレームの幅と高さを指定します。

 ただし、本書執筆時点では、主要なWebブラウザーはsrcdoc属性とseamless属性には対応していません。また、sandbox属性は、本書執筆時点ではGoogle Chrome 14とSafari 5.1のみ対応しています。
※Internet Explorer、Firefox、Google Chrome、Safari、Opera


サンプル

(body要素の内部)

<p><iframe src="inner.html" width="400" height="50"></iframe></p>

(inner.htmlのbody要素の内部)

<p>iframe要素の中に表示されるページです。</p>

サンプル実行画像

Powered by Web Professional

目次