Melog

Entry

IE7において座標が正しく取得出来なくなった件

IE6からIE7にバージョンアップした際に、Javascriptでページ上の座標が上手く取得出来なくなる場合がある。実際、その状況に出くわした。
これは、標準モードと互換モード(参考:標準モードと互換モードについて:HTMLタグ辞典)の動作の違いによって生じる物らしい。

ブラウザのスクロール量を取得するには? | Diaspar Journal

問題になるのは、
document.body.scrollLeft
document.body.scrollTop
など。
これらは、表示させたページ上における描画領域左上の座標(例えば、ブラウザで下に100ピクセルスクロールさせた状態であれば、document.body.scrollTopは100となる)を取得するプロパティ。
これらは多くのJavascript解説サイトにおいて、IEでページ上のマウスカーソル座標を取得する際に用いられるプロパティだけど、これは実際のところ互換モードでしか正常に動作しないようだ。標準モード時に必ず0を返すようになる。これと同じ機能を実現させるには
document.documentElement.scrollLeft
document.documentElement.scrollTop
と置き換える必要がある。ちなみに、逆に互換モードの場合このプロパティは0を返すようだ。

何故この問題が生じたかというと、IEのバグのせい。
今までのIEでは、頭にxml宣言を入れるとDOCTYPE宣言が無視され、必ず互換モードとなるバグがあった。今度のIE7では、xml宣言があっても標準モードで動作するようになった。
今回の件は、これが尾を引いてしまった形となったようだ。だから、これからJavascriptを記述する時は、今回の座標の件に関わらず、同じIEでも6と7で動作を分ける必要性が生じてくる可能性がある。

ちなみに、IE6とIE7を判別するには以下のように記述するそうだ。

IE6とIE7を判別するJavascriptコード:phpspot開発日誌

if (typeof document.body.style.maxHeight != "undefined") { 
// IE 7, mozilla, safari, opera 9 
} else { 
// IE6, older browsers 
} 

余談だけど、個人的にこういった動作と全く関係のないプロパティの有無でブラウザを判別する手法はあまり好きになれない。
というのも、それと同じ状態を再現をするブラウザの存在を完全に無視している事になるから。そういうブラウザが存在するかどうかは知らないけど、実際に存在するかもしれないし、将来的に登場しないとも限らない。
実際、「窓の杜 - 【NEWS】米Mozilla、プラグイン統一規格“NPRuntime”に対応した「Mozilla」v1.7.5」に見られるように、MozillaがわざわざIEを意識した実装をせざるをえなかったという経緯もある。(もっとも、document.allはIEの独自拡張なのだけど)

追記

FirefoxはJavascriptのバージョン1.7が実装され、いずれ2.0に対応するそうだけど、果たしてIEはどこまで対応してくれるんでしょうか…。

関連

ITmedia News:「OSとしてのブラウザ」時代、いよいよ到来か?


7日追記

ドキュメントモードを調べる

document.compatModeなんて便利な代物があったのか…。

Comments (0件)

現在コメントはありません。

Comment Form

Notice
  • HTMLタグは使えません。
  • URLは自動的にリンクされます。
  • 公開に不都合のある情報は記入しないでください。
    ただし、メールアドレスは公開されません。
  • 投稿前に文章をコピーしておく事を推奨します。
  • 古いアーカイブへのコメントもご自由にどうぞ。
Post

画像の中に見える文字を入力してください。

TrackBacks (0件)

現在トラックバックはありません。

Trackback URL
URLhttp://melog.info/mt/mt-tb.cgi/1018
Notice
  • トラックバック元が存在しない場合や、トラックバック元に当記事へのリンクが無い場合は受け付けません。
  • こちらからトラックバックをお返しする事はありません。
  • 気になった事に対してコメントをお返しする場合があります。
  • 古いアーカイブへのトラックバックもご自由にどうぞ。