您的位置: 首页  >  IT文章  >  用 Javascript 获取页面大小、窗口大小跟滚动条位置

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

分类: IT文章 • 2022-05-18 13:58:35
用 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 && 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};
}

获得滚动条位置的 Javascript 函数

函数 GetPageScroll 能够给出滚动条的位置。执行这个函数会得到一个包含滚动条水平位置和滚动条垂直位置的对象。

这个函数通过一个有3个分支的 if...else 语句实现。第1个分支针对Mozilla家族的浏览器例如Firefox；第2个分支针对Strict模式的IE 6.0 浏览器；第3个分支针对普通IE和其他浏览器。

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};
}

可以通过下来完整的 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>

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

来源：http://www.blabla.cn/js_kb/javascript_pagesize_windowsize_scrollbar.html

 

相关推荐