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

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

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

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

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

IE6

document.body.scrollWidth
document.body.scrollHeight

NN6,FireFox

document.width
document.height

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

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

(*1) Standard Modeでは、このプロパティはbody要素自体のスクロール量を示すようになるので、通常は0が読める。body要素に"overflow:auto;height:100%"などのスタイルを指定してスクロールバーがついている場合には、そのスクロール量を取得できる。。
(*2) Quirks Modeの場合、このプロパティは0が読める。

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

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

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

IE6

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

NN6,FireFox

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

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

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

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

プロパティ		説明
IE	NN6,FireFox	説明
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);

iframeのドキュメント

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"