2005年11月07日
川俣晶の縁側ソフトウェア技術雑記total 18281 count

Internet Explorer上のJavaScriptで、クライアントサイズが取得できない問題

Written By: 川俣 晶連絡先

 Internet Explorer 6.0のstandards-compliant modeを使用した場合、どうやらJavaSctiptプログラムからdocument.body.clientHeightでウィンドウのクライアント領域のサイズを取得できないようです。

 ここでいう「ウィンドウのクライアント領域のサイズ」とは、基本的にWindows APIでいうところのクライアント領域のサイズに相当するものですが、ツールバーなどは含まないウィンドウ内部の領域のサイズを意味します。

検証プログラム1・standards-compliant modeを使用 §

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

<title>test008 css1compat</title>

</head>

<body onload="alert(document.body.clientHeight)">

</body>

</html>

検証プログラム2・standards-compliant modeを使用しない §

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

<title>test008 not css1compat</title>

</head>

<body onload="alert(document.body.clientHeight)">

</body>

</html>

結果 §

 前者は、Webブラウザのウィンドウサイズに関わらず常に同じ値(18, おそらくフォントサイズの指定によって変わると推定)を表示します。

 後者は、Webブラウザのウィンドウサイズによって変化する値を表示します。おそらく、クライアント領域の縦サイズと思います。

 このことから、以下の2つのことが推測されます。

  • standards-compliant modeの相違は、document.body.clientHeightの挙動に決定的な非互換性をもたらす (これを使う場合、モードの切り替えは簡単にはできない。また、汎用ライブラリなどを作る場合は、どちらのモードで実行されているか判定して動作を変える必要がある)
  • standards-compliant modeでは、document.body.clientHeightを用いてウィンドウのクライアント領域のサイズを取得できない

解決 §

 document.body.clientHeightではなく、document.documentElement.clientHeightを使うと取得できます。

 以下のコードは、standards-compliant modeになりますが、意図したクライアントサイズの取得に成功します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

<title>test008 css1compat with fix</title>

</head>

<body onload="alert(document.documentElement.clientHeight)">

</body>

</html>

感想 §

 Googleマップが、クライアントサイズにフィットする機能を実現している以上、何かあるはずだと思ったらありました。

 まさにスリルと冒険の世界ですね。

Facebook

トラックバック一覧

2007年03月05日IE6 標準準拠モード有効/無効From: groundwalker.com

IE6 の挙動にはまった一日。。。 IE6 は !DOCTYPE 指定によって... 続きを読む

2006年04月12日くちコミ釣りマップ 更新From: davlog

Google Maps API が Version 2 になったので、そのアップグレード作業と共にかなり大きな更新を行いました。 Google Maps API Version 2 を使用地図の大きさをブラウザの表示領域にあわせて動的に変更ポイント情報の読み込みを地図の操作にあわせて取得(Ajax)新規作成や編集&hellip; 続きを読む

このコンテンツを書いた川俣 晶へメッセージを送る

[メッセージ送信フォームを利用する]

メッセージ送信フォームを利用することで、川俣 晶に対してメッセージを送ることができます。

この機能は、100%確実に川俣 晶へメッセージを伝達するものではなく、また、確実に川俣 晶よりの返事を得られるものではないことにご注意ください。

このコンテンツへトラックバックするためのURL

https://mag.autumn.org/tb.aspx/20051107135216
サイトの表紙【技術雑記】の表紙【技術雑記】のコンテンツ全リスト 【技術雑記】の入手全リスト 【技術雑記】のRSS1.0形式の情報このサイトの全キーワードリスト 印刷用ページ

管理者: 川俣 晶連絡先

Powered by MagSite2 Version 0.36 (Alpha-Test) Copyright (c) 2004-2021 Pie Dey.Co.,Ltd.