页面大小、窗口大小和滚动条位置这三个数值在不同的浏览器例如 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
相关推荐
### JavaScript 获取窗口属性值 在Web开发中，JavaScript是一种广泛使用的编程语言，它能够与HTML和CSS紧密结合，为网页提供动态交互能力。其中一项常见需求是获取浏览器窗口的各种属性值，比如宽度、高度等，这...
在JavaScript编程中，获取页面和屏幕尺寸大小是前端开发中常见的需求之一，这涉及到一系列的属性和方法，用于测量浏览器窗口、文档元素以及设备屏幕的大小。以下将详细解析如何利用JavaScript来获取这些参数，包括...
1. 使用纯JavaScript获取页面尺寸 在JavaScript中，可以利用`window`对象提供的属性来获取页面的尺寸信息。比如，可以使用`window.innerWidth`和`window.innerHeight`获取视口宽度和高度。而要获取整个页面的尺寸，...
滚动条位置 通过获取滚动条的位置，可以实现实时滚动监测等功能。 - **document.body.scrollTop**: 获取垂直滚动条的当前位置，单位为像素。 - **document.body.scrollLeft**: 获取水平滚动条的当前位置，单位为...
4. scrollTop 和 scrollLeft：获取元素的滚动条位置。 三、Style 对象 Style 对象提供了多个属性来获取元素的样式信息。其中包括： 1. width 和 height：获取元素的宽度和高度，excluding 边框、padding、margin ...
下面是一段示例代码，该代码展示了如何使用JavaScript获取以上提到的所有尺寸信息，并将其输出到控制台： ```javascript var s = ""; s += "\r\n页面宽度：" + document.body.clientWidth; s += "\r\n页面高度：" +...
在JavaScript中，获取当前页面...以上是关于“javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数”的主要知识点，通过学习和理解这些内容，开发者可以更好地控制和适应网页在不同设备和窗口大小下的表现。
例如，创建一个假的滚动条元素，通过JavaScript控制其位置和大小。 ```css /* Webkit 浏览器 */ ::-webkit-scrollbar { width: 10px; /* 滚动条宽度 */ } ::-webkit-scrollbar-track { background-color: #f1f1f1...
4. **模拟滚动条**：使用JavaScript，我们可以创建自定义的滚动条元素，并通过改变它们的大小和位置来反映实际的滚动位置。这些元素可以通过CSS定位在页面的边缘，以模仿原生滚动条的行为。 5. **处理滚动操作**：...
- **适用场景**：当需要获取可视区域内不包含滚动条的实际宽度和高度时使用。 - **示例代码**： ```javascript const width = document.body.clientWidth; const height = document.body.clientHeight; ``` 2...
- 在页面加载时调整元素的位置和大小，确保它们始终在视口中可见。 - 监听滚动事件，动态更新页面内容或布局。 - 创建自适应布局，使网站在不同设备和屏幕尺寸上都能正常显示。 - 实现滚动条动画效果，如平滑滚动。 ...
3. `scrollTop` 和 `scrollLeft`：用于获取或设置元素的垂直和水平滚动条的位置，即内容相对于视口的位置。 4. `clientWidth` 和 `clientHeight`：返回元素内容区域的宽度和高度，不包括边框和滚动条。 5. `...
"javascript经典特效---显示页面窗口参数.rar"这个压缩包文件很可能包含了一个教程或示例，用于演示如何使用JavaScript来获取和显示页面窗口的参数。 页面窗口参数主要包括以下几个方面： 1. **宽度和高度**：`...
在前端开发中，经常需要获取浏览器的可见窗口大小以及其他相关信息，以便能够根据不同的设备和浏览器环境来优化网页布局与用户体验。本文将详细解析如何通过JavaScript来获取不同浏览器下的窗口尺寸，并探讨一些特殊...
在JavaScript中，可以通过以下方式获取页面滚动的高度： 1. **`window.scrollY`**： - 这个属性返回的是页面垂直滚动的距离。 - 在现代浏览器中推荐使用此方法。 2. **`document.documentElement.scrollTop` 或 ...
总结，JavaScript获取网页高度和宽度的方法多种多样，可以根据具体需求选择合适的方式。了解这些知识对于提升网页交互体验和实现动态布局至关重要。在教育领域，理解并熟练掌握这些技术可以帮助学生更好地构建动态、...
- `features`：一个字符串，包含多个用逗号分隔的设置项，用来控制新窗口的特性，如大小、位置等。 **示例代码**： ```javascript window.open('page.html', 'newwindow', 'height=100,width=400,top=0,left=0,...
在进行Web开发时，尤其是在使用Ajax技术对页面进行动态更新时，经常需要精确获取页面元素的位置、大小以及滚动条的位置信息。这些信息对于确保元素在页面上正确地显示和交互至关重要。在没有提供原生JavaScript解决...
在ASP.NET中，处理页面随滚动条滑动的层这一需求，通常涉及到JavaScript、CSS和可能的AJAX技术。让我们深入探讨一下这个主题。 首先，我们要理解网页上的层（Layer）是指可以独立于网页其他元素移动或改变大小的...
以下是基于提供的内容，对于使用JavaScript获取页面元素具体位置的知识点的详细介绍。 ### 网页的大小和浏览器窗口的大小 网页的大小是由内容和CSS样式决定的全部面积。它通常包含了内容区域、内边距（padding）、...