ブラウザの表示領域を取得とか。 - ××××Diary
ブラウザの表示領域を取得とか。CommentsAdd Star
JavaScript
javascriptでブラウザの表示領域(非表示部分も含む)を取得するには、
標準モードか後方互換モードかで使えるプロパティが変わってくる。
そこらへんの話は、下記サイトがとてもわかりよいです。
DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 )
ブラウザの表示領域のサイズを取得する方法
ブラウザのスクロールバーで隠れている領域を含むサイズを取得する方法。
で、自分でhtmlを書く分には標準or後方互換にするかを決めれるものの
ぐりもんのようにブラウザに組み込んでつかう場合は標準or後方互換の
どちらのモードでも動かないといけないし、ライブラリにするのなら
標準or後方互換に加えブラウザ間も考慮しないといけなくなる。。
標準か後方互換かは、document.compatModeで判別が可能のようで
→ドキュメントモードを調べる
標準モードの場合(IE6/IE7/Firefox3.0.7/Opera9.6.4/Chrome1.0.154.48/Safari3.2.1)
CSS1Compat という文字列が返ってきます。
後方互換モードの場合(IE6/IE7/Firefox3.0.7/Opera9.6.4/Chrome1.0.154.48/Safari3.2.1)
BackCompat という文字列が返ってきます。
ちなみに、表示領域を取得する際のプロパティについて
最近のブラウザの対応状況をチェックしてみました。
タイプ プロパティ IE6 IE7 FF3 Op9 Ch1 Sa3
標準 document.documentElement.clientWidth/Height OK OK OK OK OK OK
標準 document.body.clientWidth/Height NG NG NG NG NG NG
後方互換 document.documentElement.clientWidth/Height NG NG NG NG OK OK
後方互換 document.body.clientWidth/Height OK OK OK OK OK OK
これなら、標準or後方互換の振り分けでだいじょぶですね。
標準→document.documentElement.clientWidth
後方互換→document.body.clientWidth/Height
同様に、非表示領域を含むサイズを取得するプロパティについて
タイプ プロパティ IE6 IE7 FF3 Op9 Ch1 Sa3
標準 document.documentElement.scrollWidth/Height OK OK OK OK NG NG
標準 document.body.scrollWidth/Height NG NG NG NG OK OK
後方互換 document.documentElement.scrollWidth/Height NG NG NG NG NG NG
後方互換 document.body.scrollWidth/Height OK OK OK OK OK OK
ブラウザによる場合分けも必要ですね・・・
Chrome || Safari || 後方互換→ document.body.scrollWidth/Height
標準→ document.documentElement.scrollWidth/Height
結局こんな感じになるのかな？？
ブラウザの振り分けは、JavaScript によるユーザエージェント判別を使用しました。
//表示領域のサイズ
var x, y;
if(document.compatMode == "CSS1Compat"){
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}else if(document.compatMode == "BackCompat"){
x = document.body.clientWidth;
y = document.body.clientHeight;
}
//非表示領域も含むサイズ
var x_all, y_all;
var uai = new UAIdentifier();
if(uai.chrome || uai.safari || document.compatMode == "BackCompat"){
x_all = document.body.scrollWidth;
y_all = document.body.scrollHeight;
}else if(document.compatMode == "CSS1Compat"){
x_all = document.documentElement.scrollWidth;
y_all = document.documentElement.scrollHeight;
}
最近のブラウザのみならこんな感じでよさそうですね。
下記に上記コードのテストページで確認できます。
→標準モードのページ
→後方互換モードのページ
ただし．．．
macのFirefox3で見る限り
表示領域のx方向(Width)が416より小さくならないです 汗
他(macのsafari3/Opera9)は大じょぶでした。
それと・・・
ブラウザのスクロール量を取得するプロパティって変な挙動をするんですね。
ブラウザのスクロール量を取得するには？
せっかくなんでこれも上記サイトで扱っているプロパティについて
標準or後方互換とでどんな挙動をするか比較してみました。
モード プロパティ IE6 IE7 FF3 Op9 Ch1 Sa3
標準 window.scrollY - - OK - OK OK
標準 window.pageYOffset - - OK OK OK OK
標準 document.body.scrollTop 0 0 0 0 OK OK
標準 document.documentElement.scrollTop OK OK OK OK 0 0
後方互換 window.scrollY - - OK - OK OK
後方互換 window.pageYOffset - - OK OK OK OK
後方互換 document.body.scrollTop OK OK OK OK OK OK
後方互換 document.documentElement.scrollTop 0 0 0 0 0 0
表で言うとこの
ーのところは、undefinedでした。
0のところは、常に0でした。
OKのところは、きちんと値を返してくれました。
テストに使ったのは、下記ページ。
いろいろごっちゃまぜになってますが 汗
→標準モードのページ
→後方互換モードのページ
var y_scroll =;
if(document.compatMode == "BackCompat"){
y_scroll = document.body.scrollTop;
}else if(document.compatMode == "CSS1Compat"){
y_scroll = window.pageYOffset || document.documentElement.scrollTop;
}
上記コードで動くかのテストのページ
→標準モードのページ
→後方互換モードのページ
