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
投稿猜你喜欢
python通过Seq2Seq实现闲聊机器人
Python中的字典及其使用方法
HTML5中 b 和 i 标签将语义化
python如何判断IP地址合法性
IOS中safari下的select下拉菜单文字过长不换行的解决方法
八条常见的CSS错误及修复方法
uni-app常用的几种页面跳转方式总结
学习ASP.NET八天入门：第三天
Mac下PyCharm快捷键分享
php开启openssl的方法
Python实现猜年龄游戏代码实例
详解使用Python写一个向数据库填充数据的小工具(推荐)
Pytorch四维Tensor转图片并保存方式(维度顺序调整)
IE7的web标准之道 Ⅰ
Django的models模型的具体使用
python实现随机梯度下降（SGD）
python实现播放音频和录音功能示例代码
flask 实现上传图片并缩放作为头像的例子
Laravel实现批量更新多条数据
