GetPageSize和GetPageScroll：获取页面大小、窗口大小和滚动条位置
作者：zenYoubin 来源：bobopo.com 时间：2008-12-27 22:30:00
页面大小、窗口大小和滚动条位置这三个数值在不同的浏览器例如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
投稿猜你喜欢
学习ASP和编程的28个观点
巧用一条SQL 实现其它进制到十进制转换
常用的数据库访问方式是什么？
如何利用触发器实现两个数据库间的同步
从trim原型函数看js正则表达式的性能
妙用Dreamweaver MX共享WPS Office文件
一文带你搞懂PHP单例模式
asp如何在刷新链接之前验证文件是否存在？
asp获取客户端的MAC地址
网页设计之步骤和大局观
ASP连接MSSQL2005 数据库
ajax实现Dig程序中的投票
从算法入手讲解SQL Server的典型示例
显示你个性的鼠标指针
IE9硬件加速性能远超Chrome5.0和Firefox4.0
PHP实现异步定时多任务消息推送
sql server 锁表语句分享
ASP编程入门进阶（十四）：Browser & Linkin
解读MySQL的InnoDB引擎日志工作原理
IE的有条件注释详解（附实例代码）
