備忘録的プログラミングリファレンス

HTMLIFrameElement インターフェイス

 HTMLIFrameElement インターフェイスは、ページ内に別のページを表示することができる <iframe> エレメントを定義したインターフェイスです。
 このインターフェイスによって、 <iframe> で利用できるプロパティメソッドイベントが提供されます。

HTMLIFrameElement 継承図

 HTMLElement インターフェイスを継承しています。

ページ内 Index

- ad -

HTMLIFrameElement の取得

 HTMLIFrameElement オブジェクトを取得するには、getElementById() メソッドなどを使用します。 このメソッドを使用するには予め <iframe> エレメントに id 属性を設定しておかなければなりません。

id による HTMLIFrameElement オブジェクトの取得
var iframe_ = document.getElementById('id_iframe');

 オブジェクトは生成しただけでは表示されません。既存のドキュメントの何処かに挿入、位置を調整する必要があります。
 既存のドキュメントに新規オブジェクトを挿入、位置を調整するには、appendChild()insertBefore()append()replaceChild() 、replaceChildren() メソッドを使用します。詳しくはそれぞれのページを参照してください。

 その他にも <iframe> エレメントを取得する方法には以下があります。詳しくはそれぞれのページを参照してください。

コンストラクター

 HTMLIFrameElement オブジェクトを生成するには、Document.createElement() メソッドを使用します。

HTMLIFrameElement オブジェクトの生成
var iframe_ = document.createElement('iframe');

プロパティ(Properties)

 以下の独自のプロパティがあります。

プロパティ概要分類
.allowfullscreen<iframe> 内のドキュメントをフルスクリーン表示への許可/不可の指定。Boolean 型。allow="fullscreen" 属性を優先
.contentDocument<iframe> 内の Document オブジェクトのハンドラー
.contentWindow<iframe> 内の Window オブジェクトのハンドラー
.height<iframe>内の高さ
.namename 属性。target、formtarget、windowName 属性に利用
.sandbox<iframe> 内に制約を設定
.src<iframe>内のドキュメントの参照先URL
.srcdoc上記の .src プロパティの値を上書き
.width<iframe>内の幅

 HTMLElement インターフェイスから継承されたプロパティが使用できます。HTMLElement インターフェイスNodeElement インターフェイスを継承しています。

Nodeのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

Elementのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

 HTMLIFrameElement.contentWindow から Window インターフェイスのプロパティが使用できます。詳しくは Window インターフェイスのプロパティを参照してください。

 <iframe> エレメントを初期値として.src="about:blank;"が使用できます。このことで、再読み込み時に自ページが読み込まれることを防ぐことができます。
 ただし、更新として使用する場合には上手く動作しない場合があるようです。

メソッド(Methods)

 独自のメソッドはありません。HTMLElement インターフェイスから継承されたメソッドが使用できます。HTMLElement インターフェイスNodeElement インターフェイスを継承しています。

Nodeのメソッド一覧 

タイプ名(ハンドラー名)概要分類

Elementのメソッド一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのメソッド一覧 

タイプ名(ハンドラー名)概要分類

 HTMLIFrameElement.contentWindow から Window インターフェイスのメソッドが使用できます。詳しくは Window インターフェイスのメソッドを参照してください。

イベント(Event)

 HTMLIFrameElement にイベントハンドラーを定義する方法には以下があります。

HTMLIFrameElement.addEventListener( 'click', ()=>{...} )
HTMLIFrameElement.onclick = function(){...}
<body onclick = "..." >

 イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。

GlobalEventHandlersのイベント一覧 

タイプ名(ハンドラー名)概要分類

DocumentAndElementEventHandlersのイベント一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのイベント一覧 

タイプ名(ハンドラー名)概要分類

 HTMLIFrameElement.contentWindow は以下の WindowEventHandlersを使用することができます。参考までに示します。

WindowEventHandlersのイベント一覧 

タイプ名(ハンドラー名)概要分類

- ad -