iframe タグエレメント

ブロックレベルエレメント

　iframe タグエレメントは、ページ内に別のページを表示することができる HTML タグエレメントです。
　フローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ, 対話型コンテンツ, 知覚可能コンテンツに利用します。

　終了タグを用いないと正しく表示されないことがあります。終了タグ</iframe>を使うようにしましょう。

<iframe>の設定

<iframe name="example" src="test.html"></iframe>

表示例

詳しくは動作の確認を参照してください

　src 属性によって読み込むページを指定します。上記の表示例では src 属性は空ですので何も表示されていません。
　明確に空であることを設定するには、src="about:blank;" とします。

　name 属性を設定するように推奨されています。JavaScript で他のエレメントから iframe タグエレメントを指定する際に利用します。

属性

グローバル属性も持ちます。以下に主な属性のみを示します。

Attribute	Value	Extra information
name		＊必須。iframeタグエレメントを特定
id		エレメントをユニークに。cssにも利用できる
class		CSSに利用。同名のclassは同じスタイルが適応される
src		参照元のURL。about:blank; で空
title		iframe で表示されるウィンドウのタイトル
allow		iframe で表示される内容に渡される初期パラメーター

動作の確認

　src 属性による URL の指定には、絶対パスまたは相対パスが使えます。
　絶対パスによって他のサイトページが表示できますが、著作権がありますので許諾が必要になります。また、悪意のあるページを取り込むと自サイトも侵される可能性がありますので、十分な注意が必要です。

　<iframe> エレメントを初期化を明確にするには、src="about:blank;"とします。このことで、再読み込み時に自ページが読み込まれることを防ぐことができます。

その他

JavaScript

　非同期で別のページが表示できるので、スクリプトで簡易操作する場合などに用いられるのを見かけます。

　<iframe>エレメントは HTMLIFrameElement インターフェイスによるオブジェクトです。JavaScript を利用する場合はこのインターフェイスも参照した方がよいでしょう。

　以下は、<iframe> オブジェクトが取得できるエレメントとその属性の一覧です。

<a>、<area>、<form> ..　target
<input>、<button> ..　formtarget
window.open() メソッド ..　windowName

　<iframe> エレメント内の Window から親 Document を取得するには、parent.document を使用します。

var parent_document = parent.document;

　window.parent.document と記述することもできます。

xsltでの書き方

　xsltファイルにiframeを利用した別ページの読み込みです。メインページのidを元にその一覧を表示する記述例です。

xsltでの別ページの一覧を読み込み

<xsl:element name='iframe'>
	<xsl:attribute name='name'>list</xsl:attribute>
	<xsl:attribute name='class'>iframe_lists</xsl:attribute>
	<xsl:attribute name='src'>../main_data/?cmmd=select&where=main_data_id='<xsl:value-of select='id' />'</xsl:attribute>
</xsl:element>

iframe タグエレメント

属性

動作の確認

その他

JavaScript

xsltでの書き方

関連（Related）