用 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(windows.innerHeight && window.scrollMaxY) {
// Mozilla
scrW = windows.innerWidth + window.scrollMaxX;
scrH = windows.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(windows.innerHeight) { // all except IE
winW = windows.innerWidth;
winH = windows.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.getElementByIdx("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>
这两个函数虽然不难，但是手头如果没有，需要起来想要凭空写出还是很困难的，因为测试不同浏览器的实现情况实属不易。因此写成文章以供速查。
用 Javascript 获取页面大小、窗口大小和滚动条位置的更多相关文章
- javascript 获取页面的高度及滚动条的位置的代码
http://www.jb51.net/article/23331.htm javascript 获取页面的高度及滚动条的位置的代码 作者: 字体:[增加 减小] 类型:转载 javascript ...
- Javascript获取页面元素相对和绝对位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- 用JavaScript获取页面上被选中的文字的技巧
这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...
- 用javaScript获取页面元素值
用JavaScript获取页面元素常见的三种方法: getElementById() ...
- JavaScript获取页面元素的常用方法
1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...
- 用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- javascript 获取页面尺寸/位置
************************************************************************//ie中如果全部不给定值则会都为零(宽和高在设置一个的 ...
- Javascript 获取页面高度（多种浏览器）
//2015年8月13日11:00:50 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: d ...
- 利用JavaScript获取页面文档内容
JavaScript的document对象包含了页面的实际内容,所以利用document对象可以获取页面内容,例如页面标题.各个表单值. <!DOCTYPE html> <html ...
随机推荐
- 关于WII光枪定位的设计(转)
方法1. 简单1 LED方法 这是一个很忽悠的方法,把LED看成是屏幕中心,把光枪摄像头的视野范围看作是屏幕范围. 假设WII枪头摄像头的数据范围为[0,1024]*[0,768],显示器屏幕分辨率为 ...
- C#网页采集
/// <summary> /// 返回提取数组 /// </summary> /// <param name="rex">正则</par ...
- java应用程序利用Exe4j打包exe文件
1. 使用简介: 把java应用程序打成exe文件我们可以借助第三方软件exe4j来完成.Exe4j大家可以在网上下载,下载地址是: http://www.ej-technologies.c ...
- C++多继承的观察和7点体会（都是实用派的观点） good
这历来是一个受争议的话题,书上的样板话我就不说了.我只说说自己的一点观察和体会: 1. 多重继承在理论上是有道理,21天学通C++里举了一个例子,就是飞马继承于飞鸟(会飞)和马(会跑),你可以定义一个 ...
- TPaintBox的前世今生
TPaintBox是一个图形控件,继承于TGraphicControl,并且只有聊聊几个函数和属性,主要就是Canvas和Paint函数,都在这里了: TPaintBox = class(TGraph ...
- Java：网络编程之UDP的使用
java.net 类 DatagramSocket 此类表示用来发送和接收数据报包的套接字,数据报套接字是包投递服务的发送或接收点. java.net 类 DatagramPacket 此类表示数 ...
- java cache过期策略两种实现，一个基于list轮询一个基于timer定时
最近项目要引入缓存机制,但是不想引入分布式的缓存框架,所以自己就写了一个轻量级的缓存实现,有两个版本,一个是通过timer实现其超时过期处理,另外一个是通过list轮询. 首先要了解下ja ...
- 每个PHP开发者都应该看的书
PHP这几年口碑很差.关于它的“糟糕设计的汇总”和语法上的矛盾有着大量的讨论,但是主要的抱怨通常是安全.很多PHP站点分分钟被黑掉,甚至一些有经验的.有见识的程序员会说,这门语言本身是不安全的. 我总 ...
- PHP高级特性二之文件处理
PHP中的文件处理也是一个相当重要的模块,这一篇的主要内容就是PHP中文件系统的简介. 文件系统用途 1. 项目处理都离不开文件处理 2. 可以用文件长时间保存数据 3. 建立缓存,在服务器中进行文件 ...
- 深入浅出：Linux设备驱动之字符设备驱
一.linux系统将设备分为3类:字符设备.块设备.网络设备.使用驱动程序: 字符设备:是指只能一个字节一个字节读写的设备,不能随机读取设备内存中的某一数据,读取数据需要按照先后数据.字符设备是面向流 ...