Linuxなどのメモ書き
2008/10/1
2008/9/30
2008/8/1
2008/2/19
2007/9/6
2007/7/12
2007/6/27
・MySQL 保守関連 - ダイゴウジ・ガイ
・JavaScript インラインフレーム(iframe)関連 - ありがとうございます。
・JavaScript Rangeの使い方 - ども
・JavaScript addEventListener() - kztomita
・JavaScript addEventListener() - uraichi
・JavaScript インラインフレーム(iframe)関連 - ありがとうございます。
・JavaScript Rangeの使い方 - ども
・JavaScript addEventListener() - kztomita
・JavaScript addEventListener() - uraichi
JavaScript クロスブラウザに関するメモ
IEとFireFoxでのJavaScript(と言うか主にDOMまわり)の挙動の違いに関するメモ書き
NN6,FireFox
"Quirks Mode" と "Standards Mode (Standards Compliant Mode)"についてはこちら。
NN6,FireFox
IE6と同じやり方でも取得できるが、window.innerWidth,innerHeightからならレンダリングモードに依存せず取得できる。
NN6,FireFox
IE6と同じやり方でも取得できるが、window.pageXOffset,pageYOffsetからならレンダリングモードに依存せず取得できる。
IE6
NN6,FireFox
他、インラインフレームがらみは「JavaScript インラインフレーム(iframe)関連」を参照。
IE6
JavaScript Rangeの使い方を参照。
IE6
NN6,FireFox
createStyleSheet()が無いので直接LINKエレメントを作成してDOMツリーに追加する。
<iframe>内のHTMLドキュメントに対してスタイルシートを設定する場合は、上記のdocumentを<iframe>のdocumentオブジェクト(以下参照)にすればよい。
← iframe内に<body>タグが書き出されていないのが原因だった模様。<body>タグを書き出してiframe内のドキュメントを構築した後なら、src属性のないiframeに対してもスタイルシートの設定ができた。(「Javascript 動的なCSSの適用」のサンプル参照)
以下のようにsetAttribute()でclass属性値を設定する方法でもできるように見えるが、IE6ではclass属性値変更後もスタイルシートの内容が表示に反映されないので注意。
MicroSoftのドキュメントによるとIE6ならenctypeで動作しそうなのだが、なぜか動作しなかった。
IE6
NN6,FireFox
IE6
NN6,FireFox
1.ウィンドウ/ドキュメント関連
1.1 ドキュメントの幅,高さの取得
IE6document.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
IE6と同じやり方でも取得できるが、window.innerWidth,innerHeightからならレンダリングモードに依存せず取得できる。
window.innerWidth window.innerHeight
1.3 クライアント領域左上の座標(ページの先頭を原点とする座標系)
ウィンドウ左上のドキュメント内における座標(つまりウィンドウのスクロール量)の取得の仕方。
// 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が読める。
(*2) Quirks Modeの場合、このプロパティは0が読める。
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系で名前が異なるものがある。
表1 イベントオブジェクトのプロパティ
|
プロパティ |
説明 |
|
|---|---|---|
| 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オブジェクト(以下参照)にすればよい。
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"
最終更新 2007/4/21 12:03:09 - kztomita
(2006/4/13 17:09:24 作成)
(2006/4/13 17:09:24 作成)
このページのコメント一覧(0) | 最近のコメントを表示 | コメントを書く
最近のコメント
コメントはありません。
