javascript获取window，document的宽高及滚动条位置

页面大小、窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现。即使在同一种浏览器例如 IE 中，不同版本也有不同的实现。

本文给出两个能兼容目前所有浏览器的 Javascript 函数，能够获得这三个数值。

一、获取页面大小和窗口大小的 Javascript 函数

函数 GetPageSize 能够获得页面大小和窗口大小。执行这个函数会得到一个包含页面宽度、页面高度、窗口宽度、窗口高度的对象。

  • 第一部分是获得页面的实际大小，通过一个有3个分支的if...else语句实现。第1个分支针对Mozilla家族的浏览器例如Firefox；第2个分支针对普通IE浏览器；第3个分支针对IE Mac浏览器。
  • 第二部分是获得窗口的实际大小，通过一个有3个分支的if...else语句实现。第1个分支针对Mozilla家族的浏览器例如Firefox；第2个分支针对Strict模式的IE 6.0 浏览器；第3个分支针对普通IE和其他浏览器。
  • 第三个部分是在页面高度或者宽度少于窗口高度或者宽度的情况下，调整页面大小的数值。因为即使页面大小不足窗口大小，我们看到的仍然是窗口大小，所以调整后的数值更加符合实际需要。
 1 function GetPageSize() {
 2   var scrW, scrH;
 3   if(window.innerHeight && window.scrollMaxY) {
 4     // Mozilla
 5     scrW = window.innerWidth + window.scrollMaxX;
 6     scrH = window.innerHeight + window.scrollMaxY;
 7   } else if(document.body.scrollHeight > document.body.offsetHeight){
 8     // all but IE Mac
 9     scrW = document.body.scrollWidth;
10     scrH = document.body.scrollHeight;
11   } else if(document.body) { // IE Mac
12     scrW = document.body.offsetWidth;
13     scrH = document.body.offsetHeight;
14   }
15 
16   var winW, winH;
17   if(window.innerHeight) { // all except IE
18     winW = window.innerWidth;
19     winH = window.innerHeight;
20   } else if (document.documentElement 
21     && document.documentElement.clientHeight) {
22     // IE 6 Strict Mode
23     winW = document.documentElement.clientWidth; 
24     winH = document.documentElement.clientHeight;
25   } else if (document.body) { // other
26     winW = document.body.clientWidth;
27     winH = document.body.clientHeight;
28   }
29 
30   // for small pages with total size less then the viewport
31   var pageW = (scrW<winW) ? winW : scrW;
32   var pageH = (scrH<winH) ? winH : scrH;
33 
34   return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};
35 }

二、获得滚动条位置的 Javascript 函数

函数 GetPageScroll 能够给出滚动条的位置。执行这个函数会得到一个包含滚动条水平位置和滚动条垂直位置的对象。

这个函数通过一个有3个分支的 if...else 语句实现。第1个分支针对Mozilla家族的浏览器例如Firefox；第2个分支针对Strict模式的IE 6.0 浏览器；第3个分支针对普通IE和其他浏览器。

 1 function GetPageScroll() {
 2   var x, y;
 3   if(window.pageYOffset) {
 4     // all except IE
 5     y = window.pageYOffset;
 6     x = window.pageXOffset;
 7   } else if(document.documentElement 
 8     && document.documentElement.scrollTop) {
 9     // IE 6 Strict
10     y = document.documentElement.scrollTop;
11     x = document.documentElement.scrollLeft;
12   } else if(document.body) {
13     // all other IE
14     y = document.body.scrollTop;
15     x = document.body.scrollLeft; 
16   }
17   return {X:x, Y:y};
18 }

可以通过下来完整的 HTML 代码来测试一下这两个函数。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml" >
 4 <head>
 5 <script type="text/javascript">
 6 ... GetPageSize函数定义 ...
 7 ... GetPageScroll函数定义 ...
 8 function main() {
 9   var div = document.getElementById("div");
10   for(var i=0; i<200; i++) {
11     document.body.appendChild(document.createTextNode("Hello, World!"));
12     document.body.appendChild(document.createElement("br"));
13   }
14   var sz = GetPageSize();
15   alert([sz.PageW,sz.PageH,sz.WinW,sz.WinH].join(", "));
16   window.scrollTo(0, sz.PageH);
17   var sl = GetPageScroll();
18   alert([sl.X,sl.Y].join(", "));
19 }
20 </script>
21 </head>
22 <body onload="main();">
23 </body>
24 </html>

 

posted @ 2013-10-10 20:57  嘻哈披头士  阅读(566)  评论(0)    收藏  举报