获取页面大小、窗口大小和滚动条位置

页面大小、窗口大小和滚动条位置这三个数值在不同的浏览器例如Firefox和IE中有着不同的实现。即使在同一种浏览器例如IE中,不同版本也有不同的实现。本文给出两个能兼容目前所有浏览器的Javascript函数,能够获得这三个数值。

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


function GetPageSize() {
var scrW, scrH;
if(window.innerHeight && window.scrollMaxY) { // Mozilla
scrW = window.innerWidth + window.scrollMaxX;
scrH = window.innerHeight + window.scrollMaxY;
} else if(document.body.scrollHeight > document.body.offsetHeight){ // all but IE Mac
scrW = document.body.scrollWidth;
scrH = document.body.scrollHeight;
} else if(document.body) { // IE Mac
scrW = document.body.offsetWidth;
scrH = document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight) { // all except IE
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // IE 6 Strict Mode
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
} else if (document.body) { // other
winW = document.body.clientWidth;
winH = document.body.clientHeight;
} // for small pages with total size less then the viewport
var pageW = (scrW<winW) ? winW : scrW; var pageH = (scrH<winH) ? winH : scrH;
return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};
}

这个函数还是很容易读懂的。

第一部分是获得页面的实际大小,通过一个有3个分支的if...else语句实现。第1个分支针对Mozilla家族的浏览器例如Firefox;第2个分支针对普通IE浏览器;第3个分支针对IE Mac浏览器。
第二部分是获得窗口的实际大小,通过一个有3个分支的if...else语句实现。第1个分支针对Mozilla家族的浏览器例如Firefox;第2个分支针对Strict模式的IE 6.0 浏览器;第3个分支针对普通IE和其他浏览器。
第三个部分是在页面高度或者宽度少于窗口高度或者宽度的情况下,调整页面大小的数值。因为即使页面大小不足窗口大小,我们看到的仍然是窗口大小,所以调整后的数值更加符合实际需要。
GetPageScroll函数能够给出滚动条的位置。执行这个函数会得到一个包含滚动条水平位置和滚动条垂直位置的对象。


function GetPageScroll() {
var x, y;
if(window.pageYOffset) { // all except IE
y = window.pageYOffset;
x = window.pageXOffset;
} else if(document.documentElement && document.documentElement.scrollTop) { // IE 6 Strict
y = document.documentElement.scrollTop;
x = document.documentElement.scrollLeft;
} else if(document.body) { // all other IE
y = document.body.scrollTop;
x = document.body.scrollLeft;
}
return {X:x, Y:y};
}

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

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><script type="text/javascript">
... GetPageSize函数定义 ...
... GetPageScroll函数定义 ...
function main() {
var div = document.getElementById("div");
for(var i=0; i<200; i++) {
document.body.appendChild(document.createTextNode("Hello, World!"));
document.body.appendChild(document.createElement("br"));
}
var sz = GetPageSize();
alert([sz.PageW,sz.PageH,sz.WinW,sz.WinH].join(", "));
window.scrollTo(0, sz.PageH);
var sl = GetPageScroll();
alert([sl.X,sl.Y].join(", "));
}</script>
</head>
<body onload="main();"></body>
</html>

这两个函数虽然不难,但是手头如果没有,需要起来想要凭空写出还是很困难的,因为测试不同浏览器的实现情况实属不易。因此写成文章以供速查。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <script type="text/javascript"> function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = window.innerHeight + window.scrollMaxY; } else if(document.body.scrollHeight > document.body.offsetHeight) { // all but IE Mac scrW = document.body.scrollWidth; scrH = document.body.scrollHeight; } else if(document.body) { // IE Mac scrW = document.body.offsetWidth; scrH = document.body.offsetHeight; } var winW, winH; if(window.innerHeight) { // all except IE winW = window.innerWidth; winH = window.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // IE 6 Strict Mode winW = document.documentElement.clientWidth; winH = document.documentElement.clientHeight; } else if (document.body) { // other winW = document.body.clientWidth; winH = document.body.clientHeight; } // for small pages with total size less then the viewport var pageW = (scrW<winW) ? winW : scrW; var pageH = (scrH<winH) ? winH : scrH; return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH}; } function GetPageScroll() { var x, y; if(window.pageYOffset) { // all except IE y = window.pageYOffset; x = window.pageXOffset; } else if(document.documentElement && document.documentElement.scrollTop) { // IE 6 Strict y = document.documentElement.scrollTop; x = document.documentElement.scrollLeft; } else if(document.body) { // all other IE y = document.body.scrollTop; x = document.body.scrollLeft; } return {X:x, Y:y}; } function main() { var div = document.getElementById("div"); for(var i=0; i<200; i++) { document.body.appendChild(document.createTextNode("Hello, World!")); document.body.appendChild(document.createElement("br")); } var sz = GetPageSize(); alert([sz.PageW,sz.PageH,sz.WinW,sz.WinH].join(", ")); window.scrollTo(0, 1500); var sl = GetPageScroll(); alert([sl.X,sl.Y].join(", ")); } </script> </head> <body onload="main();"> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值