日期:2014-05-16  浏览次数:20285 次

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

?

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

页面大小、窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现。即使在同一种浏览器例如 IE 中,不同版本也有不同的实现。

本文给出两个能兼容目前所有浏览器的 Javascript 函数,能够获得这三个数值。

获取页面大小和窗口大小的 Javascript 函数

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

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

  • 第一部分是获得页面的实际大小,通过一个有3个分支的if...else语句实现。第1个分支针对Mozilla家族的浏览器例如Firefox;第2个分支针对普通IE浏览器;第3个分支针对IE Mac浏览器。
  • 第二部分是获得窗口的实际大小,通过一个有3个分支的if...else语句实现。第1个分支针对Mozilla家族的浏览器例如Firefox;第2个分支针对Strict模式的IE 6.0 浏览器;第3个分支针对普通IE和其他浏览器。
  • 第三个部分是在页面高度或者宽度少于窗口高度或者宽度的情况下,调整页面大小的数值。因为即使页面大小不足窗口大小,我们看到的仍然是窗口大小,所以调整后的数值更加符合实际需要。
function GetPageSize() {
  var scrW, scrH;
  if(window.innerHeight &&