JavaScript インラインフレーム(iframe)関連

Rev.3を表示中。最新版はこちら。

いろいろハマリがちなJavaScriptでインラインフレームを扱う場合のメモ。

特に断らない限りブラウザのバージョンは以下が前提。

IE6
FireFox1.5

1.iframeのwindow,documentオブジェクトの取得

iframeのwindow,documentの取得方法はIEとMozilla系(NN,FireFox)で異なる。IEはframes配列のwindow,documentプロパティから取得できる。Mozilla系はiframeエレメントのcontentWindow,contentDocumentプロパティから取得できる。

IEでもMozilla系と同じくiframeエレメントのプロパティから取得することもできるが、contentDocumentについてはIEには存在しないので、documentはcontentWindow.documentとしてcontentWindow経由で取得しなければならない。

frames['xxxx'].window
frames['xxxx'].document
xxxxはiframeのID値。

以下でも取得できる。
idはiframeのID値。
IEにはcontentDocumentプロパティは存在しないので注意。
document.getElementById(id).contentWindow
document.getElementById(id).contentWindow.document

Mozilla系

document.getElementById(id).contentWindow;
document.getElementById(id).contentDocument;

2. iframeへのエレメントの追加

インラインフレームの中にappendChild()などでエレメントを挿入する場合、そのエレメントはインラインフレームのドキュメントで作成されていないといけない(以下の例参照)。

var doc;  // インラインフレームのドキュメント
if (document.all) {
  // IE
  doc  = frames[id].document;
} else {
  // Mozilla
  doc = document.getElementById(id).contentDocument;
}

// インラインフレームのドキュメントでエレメント作成
var container = doc.createElement("div");

// インラインフレーム内に追加
doc.body.appendChild(container);

Mozilla系ではdocument.createElement()で作成したエレメントでもインラインフレームにappendChild()できるが、IE6ではエラーとなるので注意。