IEとFireFoxでのJavaScript(と言うか主にDOMまわり)の挙動の違いに関するメモ書き

1.ウィンドウ/ドキュメント関連

1.1 ドキュメントの幅,高さの取得

IE6

document.body.scrollWidth
document.body.scrollHeight

NN6,FireFox

document.width
document.height

FireFox12ではdocument.width,heightはundefinedになる。
https://dev.mozilla.jp/2011/06/firefox6-backward-compatibility/
によると、このプロパティは標準化されなかったので、FireFox6以降で削除された模様。
かわりに、以下のようにしてサイズを取得できる。

parseInt(window.getComputedStyle(document.body, null).width)
parseInt(window.getComputedStyle(document.body, null).height)

新旧FireFoxで動作させる場合は、

if (typeof this.doc.height == "undefined")
  height = parseInt(window.getComputedStyle(this.doc.body, null).height);
else
  height = this.doc.height;  // deprecated (-FireFox5)

のようにするとよい。

1.2 ウィンドウ表示領域の幅,高さ

IE6

// Quirks Mode (*1)
document.body.clientWidth
document.body.clientHeight
// Standard Mode
document.documentElement.clientWidth
document.documentElement.clientHeight

(*1) ブラウザのレンダリングモード(Quirks/Standards)により返る値が異なるので注意が必要。Standards Modeで動作している場合、document.body.clientHeightでは、ドキュメントの高さが返される。このため、document.documentElement.clientHeightから取得する必要がある。

"Quirks Mode" と "Standards Mode (Standards Compliant Mode)"についてはこちら。

NN6,FireFox
IE6と同じやり方でも取得できるが、window.innerWidth,innerHeightからならレンダリングモードに依存せず取得できる。

window.innerWidth
window.innerHeight

1.3 クライアント領域左上の座標(ページの先頭を原点とする座標系)

ウィンドウ左上のドキュメント内における座標(つまりウィンドウのスクロール量)の取得の仕方。

IE6

// Quirks Modeの場合 (*1)
document.body.scrollLeft
document.body.scrollTop
// Standard Modeの場合 (*2)
document.documentElement.scrollLeft
document.documentElement.scrollTop

NN6,FireFox
IE6と同じやり方でも取得できるが、window.pageXOffset,pageYOffsetからならレンダリングモードに依存せず取得できる。

window.pageXOffset
window.pageYOffset

2.インラインフレーム関連

2.1 インラインフレーム(iframe)内のwindow,documentオブジェクトの取得

IE6

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

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

NN6,FireFox

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

他、インラインフレームがらみは「JavaScript インラインフレーム(iframe)関連」を参照。

3.イベント

3.1 イベントオブジェクトの取得

NN6,FireFoxではイベントハンドラを登録する時に引数を指定することで、ハンドラ内でイベントオブジェクトを参照できる。IE6ではwindow.eventプロパティに格納されているので直接参照する。

IE6

element.onmousedown = function () {window.event;}

NN6,FireFox

element.onmousedown = function (event) {event;}

3.2 イベントオブジェクトのプロパティ

イベントオブジェクトのよく使うプロパティについてのメモ。IEとMozilla系で名前が異なるものがある。

プロパティ		説明
IE	NN6,FireFox
button	which	押されたマウスボタン。 1:左、2:中、3:右
----	pageX,pageY	ドキュメント座標系でのマウス座標
clientX,clientY	←同じ	クライアントウィンドウ内のマウス座標
screenX,screenY	←同じ	スクリーン内のマウス座標
srcElement	target	イベント発生元のオブジェクト

4.Rangeオブジェクト

IEとMozilla系で全然違う。
JavaScript Rangeの使い方を参照。

5.その他

その他のつまづいた点に関するメモ。

5.1 Tableの作成

IEでcreateElement()でTableを構築する場合、tableエレメントの下にtbodyエレメントを入れないと表示されない。Mozilla系ではtableエレメントの下に直接trエレメントを入れても問題ない。

var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for(var i = 0 ; i < rows ; i++) {
  var tr = document.createElement("tr");
  for(var j = 0 ; j < cols ; j++) {
    var td = document.createElement("td");
    td.innerHTML = "cell";
    tr.appendChild(td);
  }
  tbody.appendChild(tr);
}

IEの場合でもinnerHTMLに直接HTMLを書き込む場合は、<tbody>を入れなくても動作する。ただし、tbodyは自動的に挿入されてしまう。innerHTMLでテーブルを作ってからDOM操作をする場合は、<tbody>があっても動作するようにしておかないといけないので注意が必要。Mozilla系では<tbody>が勝手に挿入されることはない。

var div = document.createElement("div");
div.innerHTML =
"<table><tr><td>cell</td><td>cell</td></tr></table>";

5.2 スタイルシートの追加

ドキュメントにスタイルシートを適用する時の処理。

IE6

document.createStyleSheet("sample.css");

NN6,FireFox
createStyleSheet()が無いので直接LINKエレメントを作成してDOMツリーに追加する。

var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", "sample.css");
link.setAttribute("type", "text/css");
document.getElementsByTagName('head')[0].appendChild(link);

<iframe>内のHTMLドキュメントに対してスタイルシートを設定する場合は、上記のdocumentを<iframe>のdocumentオブジェクト(以下参照)にすればよい。

IE6:       frames[id].document;
Mozilla系: document.getElementById(id).contentDocument
idは<iframe>のid属性値

FireFox1.5では<iframe>にsrc属性値が設定されていないと、スタイルシートの追加はできなかった。(LINKエレメントは追加できるのだがstyleSheetsプロパティにエントリが追加されなかった)
← iframe内に<body>タグが書き出されていないのが原因だった模様。<body>タグを書き出してiframe内のドキュメントを構築した後なら、src属性のないiframeに対してもスタイルシートの設定ができた。(「Javascript 動的なCSSの適用」のサンプル参照)

5.3 エレメントのclass属性値の変更

IE,Mozilla系とも以下で行える。

document.getElementById(id).className = "xxxx";

以下のようにsetAttribute()でclass属性値を設定する方法でもできるように見えるが、IE6ではclass属性値変更後もスタイルシートの内容が表示に反映されないので注意。

document.getElementById(id).setAttribute("class", "xxxx");

5.4 formエレメントのenctype属性

formエレメントにenctype属性を設定する場合、IE6ではなぜかenctypeプロパティを設定しても動作に反映されないので、encodingプロパティを使用する。
MicroSoftのドキュメントによるとIE6ならenctypeで動作しそうなのだが、なぜか動作しなかった。

IE6

document.createElement("form").encoding = "multipart/form-data"

NN6,FireFox

document.createElement("form").enctype = "multipart/form-data"

5.5 CSSのfloat設定

テキストの回り込みを指定する'float'をJavaScriptから設定する場合、IEとMozilla系でプロパティ名が異なる。以下はスタイルに'float:left'を設定する例。

IE6

element.style.styleFloat = "left"

NN6,FireFox

element.style.cssFloat = "left"