JavaScript クロスブラウザに関するメモ

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

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

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

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

IE6

document.body.scrollWidth
document.body.scrollHeight

NN6,FireFox

document.width
document.height

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

IE6

document.body.clientWidth
document.body.clientHeight

HTMLで<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">などの定義をしてIEのレンダリングモードが"Standards Mode"で動作している場合、document.body.clientHeightで正しくウィンドウのクライアント領域の高さがとれない(ドキュメントの高さっぽい値が返される)。

解決策としては以下があるが、DOCTYPEを変えるのは確認などで大変なので2.になるか。

"Quriks Mode"で動作させる。(DOCTYPEを宣言しなかったり、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> を宣言すると"Quriks Mode"になる)
document.documentElement.clientHeightで取得

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

NN6,FireFox

window.innerWidth
window.innerHeight

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

IE6

document.body.scrollLeft
document.body.scrollTop

NN6,FireFox

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.イベント

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

プロパティ		説明
IE	Mozilla系	説明
button	which	押されたマウスボタン。 1:左、2:中、3:右
clientX,clientY	pageX,pageY	クライアントウィンドウ内のマウス座標。画面内の座標はIE,Mozilla系とも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);

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

FireFox1.5では<iframe>にsrc属性値が設定されていないと、スタイルシートの追加はできなかった。(LINKエレメントは追加できるのだがstyleSheetsプロパティにエントリが追加されなかった)

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"