页面大小、窗口大小和滚动条位置这三个数值在不同的浏览器例如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>
这两个函数虽然不难，但是手头如果没有，需要起来想要凭空写出还是很困难的，因为测试不同浏览器的实现情况实属不易。因此写成文章以供速查。
分享到：
相关推荐
js与jquery获得页面大小、滚动条位置、元素位置 代码如下://页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW = window.innerWidth +...
jQuery获取位置和尺寸相关函数： $(document).height() 获取整个页面的高度 $(window).height() 获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样...
下面的教程总结了Javascript在网页...很显然，如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的绝对大小和相对大小是相等的。 二、获取网页的相对大小 网页上的每个元素，都有clientHeigh
很显然，如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器窗口，可以显示出网页的各个部分。 二、获取网页的大小 ...
01014获取Excel主窗口的左边界位置和顶端位置 01015获取在Excel主窗口中一个窗口所能占有的最大高度和宽度 01016获取当前打印机名称 01017获取MicrosoftExcel剩余内存 01018获取MicrosoftExcel的总内存 01019获取...
17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码（二） 18.3 在线测试代码（三） 18.4 多选考试题 18.5 在线心理测试脚本 18.6 电脑检测...
17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码（二） 18.3 在线测试代码（三） 18.4 多选考试题 18.5 在线心理测试脚本 18.6 电脑检测...
SendMessage 调用一个窗口的窗口函数，将一条消息发给那个窗口 SendMessageCallback 将一条消息发给窗口 SendMessageTimeout 向窗口发送一条消息 SendNotifyMessage 向窗口发送一条消息 3. API之文件处理函数 ...
实例027 设置窗口大小和位置 43 实例028 刷新当前页 44 实例029 自动最大化 45 实例030 自定义导航控制面板 46 实例031 根据用户分辨率自动调整窗口 48 1.5 窗口的其他效果 49 实例032 打开窗口时显示对话框 50 实例...
加载窗口、浮动窗口、置顶窗口、倒计时窗口、只读窗口支持窗口最大化、...大小及拖曳方向控制支持窗口自动获取页面标题支持窗口位置记录及恢复支持窗口相互通讯支持窗口设定自动关闭支持窗口外观控制、状态栏、透明度...
fixPosition：设定是否弹出框随滚动条一起浮动，保持在屏幕的固定位置，默认为true dragOut：设定是否允许拖出屏幕范围，默认为false。 autoClose：设定用户点击窗口中按钮后自动关闭窗口，默认为true（设定为...
013 如何使用滚动条控件? 014 如何设置按钮控件标签? 015 如何设置按钮控件字体? 016 如何动态创建按钮控件? 017 如何禁用和启用按钮控件? 018 如何隐藏和显示按钮控件? 019 如何在按钮控件上加载图标? 020 如何在...
原理很简单： 获取当前屏幕（窗体）的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度...
scrollbar：指定当前窗口文档大于窗口时是否有滚动条，选项的值及含义与 toolbar相同； resizable：指定窗口是否可改变大小，选项的值及含义与toolbar相同； width：以像素为单位指定窗口的宽度，已被...
17.5.2 修改滚动条 445 17.5.3 控件模板示例 450 17.6 可视化状态 451 17.7 小结 452 第18章 自定义元素 453 18.1 理解WPF中的自定义元素 454 18.2 构建基本的用户控件 456 18.2.1 定义依赖项属性 456 18.2.2 定义...
5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 读取XML数据的自动完成 5.7 多维数据的自动完成 第6章 jQuery实现拖放功能 6.1 基本拖放功能 6.2 基于事件的拖放 6.3 限制移动范围的拖放 6.4 延迟进行的...
-这将会影响所有的aspx页面，一定要将工具条（Toolbars）和Items区分开来。 -祝你生日快乐 - 小师妹妹。 +2009-08-29 v2.0.8 -ExtAspNet支持多语言（en,zh_CN,zh_TW），可以在Web.config中修改。 -将所有的...
-这将会影响所有的aspx页面，一定要将工具条（Toolbars）和Items区分开来。 -祝你生日快乐 - 小师妹妹。 +2009-08-29 v2.0.8 -ExtAspNet支持多语言（en,zh_CN,zh_TW），可以在Web.config中修改。 -将所有的...
17.5.2 修改滚动条 445 17.5.3 控件模板示例 450 17.6 可视化状态 451 17.7 小结 452 第18章 自定义元素 453 18.1 理解WPF中的自定义元素 454 18.2 构建基本的用户控件 456 18.2.1 定义依赖项属性 456 18.2.2 定义...