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

HTMLIFrameElement インターフェイス

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

HTMLIFrameElement 継承図

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

コンストラクター

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

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

HTMLIFrameElement の取得

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

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

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

 その他にも <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 インターフェイスのプロパティを参照してください。

メソッド(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のイベント一覧 

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