HTMLIFrameElement インターフェイス
HTMLIFrameElement インターフェイスは、ページ内に別のページを表示することができる <iframe> エレメントを定義したインターフェイスです。
このインターフェイスによって、 <iframe> で利用できるプロパティ、メソッド、イベントが提供されます。
- EventTarget
- └─ Node
- └─ Element
- └─ HTMLElement
- ┆
- ├─ HTMLIFrameElement
- ┆
- └─ HTMLElement
- └─ Element
- └─ Node
HTMLElement インターフェイスを継承しています。
- ad -
HTMLIFrameElement の取得
HTMLIFrameElement オブジェクトを取得するには、getElementById() メソッドなどを使用します。 このメソッドを使用するには予め <iframe> エレメントに id 属性を設定しておかなければなりません。
var iframe_ = document.getElementById('id_iframe');
オブジェクトは生成しただけでは表示されません。既存のドキュメントの何処かに挿入、位置を調整する必要があります。
既存のドキュメントに新規オブジェクトを挿入、位置を調整するには、appendChild()、insertBefore() 、 append()、replaceChild() 、replaceChildren() メソッドを使用します。詳しくはそれぞれのページを参照してください。
その他にも <iframe> エレメントを取得する方法には以下があります。詳しくはそれぞれのページを参照してください。
コンストラクター
HTMLIFrameElement オブジェクトを生成するには、Document.createElement() メソッドを使用します。
var iframe_ = document.createElement('iframe');
プロパティ(Properties)
以下の独自のプロパティがあります。
| プロパティ | 概要 | 分類 |
|---|---|---|
| .allowfullscreen | <iframe> 内のドキュメントをフルスクリーン表示への許可／不可の指定。Boolean 型。allow="fullscreen" 属性を優先 | |
| .contentDocument | <iframe> 内の Document オブジェクトのハンドラー | |
| .contentWindow | <iframe> 内の Window オブジェクトのハンドラー | |
| .height | <iframe>内の高さ | |
| .name | name 属性。target、formtarget、windowName 属性に利用 | |
| .sandbox | <iframe> 内に制約を設定 | |
| .src | <iframe>内のドキュメントの参照先URL | |
| .srcdoc | 上記の .src プロパティの値を上書き | |
| .width | <iframe>内の幅 |
HTMLElement インターフェイスから継承されたプロパティが使用できます。HTMLElement インターフェイスは Node 、Element インターフェイスを継承しています。
Nodeのプロパティ一覧
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|
Elementのプロパティ一覧
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|
HTMLElementのプロパティ一覧
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|
HTMLIFrameElement.contentWindow から Window インターフェイスのプロパティが使用できます。詳しくは Window インターフェイスのプロパティを参照してください。
<iframe> エレメントを初期値として.src="about:blank;"
が使用できます。このことで、再読み込み時に自ページが読み込まれることを防ぐことができます。
ただし、更新として使用する場合には上手く動作しない場合があるようです。
メソッド(Methods)
独自のメソッドはありません。HTMLElement インターフェイスから継承されたメソッドが使用できます。HTMLElement インターフェイスは Node 、Element インターフェイスを継承しています。
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 -