注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

隐龙 为了一生的信念

今日默默沉于水,他日飞腾在九天...

 
 
 

日志

 
 

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

2012-09-01 21:48:10|  分类: JAVASCRIPT |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

页面大小、窗口大小和滚动条位置这三个数值在不同的浏览器例如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>

这两个函数虽然不难,但是手头如果没有,需要起来想要凭空写出还是很困难的,因为测试不同浏览器的实现情况实属不易。因此写成文章以供速查。

  评论这张
 
阅读(618)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018