呼呼,搞了大半天,总算弄明白了为何用document.body.clientHeight,document.body.offsetHeight都 没有办法获取网页可见区域的正确值,原来罪魁祸首是W3C定义的标准!!在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见 窗口大小这方面的差别:
<script>
function getInfo()
{
var s =
"";
s += "
网页可见区域宽:"+ document.body.clientWidth;
s += "
网页可见区域高:"+ document.body.clientHeight;
s += "
网页可见区域宽:"+ document.body.offsetWidth + "
(包括边线和滚动条的宽)";
s += "
网页可见区域高:"+ document.body.offsetHeight + "
(包括边线的宽)";
s += "
网页正文全文宽:"+ document.body.scrollWidth;
s += "
网页正文全文高:"+ document.body.scrollHeight;
s += "
网页被卷去的高(ff):"+ document.body.scrollTop;
s += "
网页被卷去的高(ie):"+
document.documentElement.scrollTop;
s += "
网页被卷去的左:"+ document.body.scrollLeft;
s += "
网页正文部分上:"+ window.screenTop;
s += "
网页正文部分左:"+ window.screenLeft;
s += "
屏幕分辨率的高:"+ window.screen.height;
s += "
屏幕分辨率的宽:"+ window.screen.width;
s += "
屏幕可用工作区高度:"+ window.screen.availHeight;
s += "
屏幕可用工作区宽度:"+ window.screen.availWidth;
s += "
你的屏幕设置是 "+ window.screen.colorDepth +"
位彩色";
s += "
你的屏幕设置 "+ window.screen.deviceXDPI +"
像素/英寸";
//alert
(s);
}
getInfo();
</script>
在我本地测试当中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。
而在公司项目当中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
如果在页面中添加这行标记的话
在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==>
BODY对象高度
document.documentElement.clientWidth ==>
可见区域宽度
document.documentElement.clientHeight ==>
可见区域高度
在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==>
BODY对象高度
document.documentElement.clientWidth ==>
可见区域宽度
document.documentElement.clientHeight ==>
可见区域高度
?
在Opera中:
document.body.clientWidth ==>
可见区域宽度
document.body.clientHeight ==>
可见区域高度
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==>
页面对象高度(即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight
==>
页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight
==>
页面对象高度(即BODY对象高度加上Margin高)
原文地址:http://www.css88.com/article.asp?id=133
判断浏览器的类型:
var ua =
navigator.userAgent.toLowerCase ();
var os = new Object();
os.isFirefox = ua.indexOf ("gecko") != -1;
os.isOpera = ua.indexOf ("opera") != -1;
os.isIE = !os.isOpera && ua.indexOf
("msie") != -1;
获取浏览器区域的大小:
//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}
return arrayPageScroll;
}
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){
var xScroll, yScroll;
if (windows.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = windows.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
发表评论
-
注意 将 jQuery Array 转换为 normal Array
2012-02-17 16:37 966一个很小的失误,耗了我2个小时的时间。 func ... -
【phenomenon】onscroll事件绑定
2011-09-05 13:34 878情况: $(function){ window ... -
关于报错和undefined
2011-08-09 17:03 8201.在全局范围内,变量必须要用var 声明,不然会报错。在局部 ... -
关于匿名函数
2011-07-05 11:13 11151.关于匿名函数的申请与执行 (function(){ ... -
JavaScript的保留字和关键字
2011-06-21 14:48 1329JavaScript 关键字 break false ... -
ECMAScript 与 正则表达式
2011-06-14 14:47 15471.String.match()与RegExp.exec() ... -
ECMAScript 等性运算符 和原始类型
2011-06-08 11:54 8331.关于类型 ECMAScript分为原始类型 和 ... -
JavaScript中事件绑定局部函数
2010-09-02 10:51 1097<!DOCTYPE html PUBLIC &quo ...
相关推荐
### 关于获取各种浏览器可见窗口大小的知识点 在前端开发中,经常需要获取浏览器的可见窗口大小以及其他相关信息,以便能够根据不同的设备和浏览器环境来优化网页布局与用户体验。本文将详细解析如何通过JavaScript...
### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中,获取浏览器显示区域的大小是非常重要的一个环节,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...
在JavaScript中,有以下两个主要的事件用于监听浏览器窗口大小的变化: 1. `resize` 事件:这是最直接与窗口大小变化相关的事件。当你拖动浏览器窗口的边缘或者调整窗口大小时,浏览器会触发这个事件。你可以通过在...
### JavaScript 获取浏览器临时目录知识点详解 #### 一、概述 在Web开发中,有时需要获取浏览器的临时目录以便进行文件操作或数据缓存等任务。然而,由于浏览器安全策略的限制,JavaScript直接获取本地文件系统...
JavaScript 获取浏览器类型和版本的方法 浏览器类型和版本是 web 开发中非常重要的信息,许多web应用程序需要根据浏览器类型和版本来进行相应的处理。JavaScript 提供了多种方法来获取浏览器类型和版本,本文将介绍...
在本文中,我们将深入探讨如何利用JavaScript来实现自定义浏览器窗口的功能,包括窗口拖动、放大缩小、最小化以及全屏操作。 一、窗口拖动 在JavaScript中,我们可以使用事件监听来实现窗口拖动的功能。首先,我们...
本篇文章将详细讲解一个利用jQuery实现的响应式图片排列代码,该代码旨在使图片画廊根据浏览器窗口大小自动调整布局,以达到视觉上的统一和和谐。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、...
在JavaScript中,获取浏览器窗口、屏幕以及网页的高度和宽度是常见的需求,这在网页布局、动态调整元素尺寸、响应式设计等方面非常有用。以下是一些关键的JavaScript属性和方法,用于获取这些信息: 1. **网页可见...
在JavaScript中,监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一:适用于IE浏览器,仅在关闭时提示 ```javascript window....
JavaScript各种主流浏览器的调试包括搜狗、谷歌、QQ等(我是搬运工)
2. **枚举浏览器窗口**:使用`SHDocVw.ShellWindows`类可以枚举系统中所有打开的浏览器窗口。每个窗口是一个`WebBrowser`对象,可以通过检查`LocationURL`属性来获取地址栏的URL。 ```csharp using SHDocVw; ...
使用 JavaScript 获取客户端字体列表是非常有用的,因为 JavaScript 可以在所有浏览器中运行。我们可以使用 JavaScript 创建一个字体下拉菜单,然后使用 JavaScript 获取客户端字体列表。 实现获取客户端字体列表的...
在JavaScript中,获取当前页面可视区域的尺寸以及浏览器窗口的尺寸是常见的需求,尤其是在进行网页布局、响应式设计或者滚动事件处理时。本压缩包文件"javascript获取当前页面可视高度和宽度及浏览器宽度和高度的...
ie,谷歌,火狐,safari等浏览器均可判断出来,也是借鉴别人的
博文链接:https://zhanglingsi.iteye.com/blog/243677
浏览器大小 获取浏览器的窗口大小和限制的调整大小事件。安装npm install browser-size --save用法创建一个新的浏览器大小实例并添加一个监听器 var browser = require ( 'browser-size' ) ( )browser . on ( '...
在这个例子中,监听的是"resize"事件,当用户调整浏览器窗口大小时触发。 2. **设备像素比(devicePixelRatio)**: - `window.devicePixelRatio` 是一个表示设备物理像素与CSS像素之间比例的属性。在大多数现代...
JavaScript 提供了 `navigator` 对象来帮助开发者获取客户端浏览器的相关信息,包括浏览器的版本号等重要数据。下面将详细介绍如何使用 `navigator` 对象来检测浏览器版本以及其他相关信息。 #### 一、`navigator` ...
总之,Ply作为一款跨浏览器的模态窗口插件,不仅提供了丰富的功能,还考虑到了对旧版浏览器的支持,使得开发者能在各种场景下轻松创建美观且一致的用户提示和对话体验。通过深入理解和利用Ply的特性,我们可以提升...
在JavaScript编程语言中,开发者经常需要获取与网页和屏幕尺寸相关的数据,比如页面的可视区域、文档的实际大小以及用户屏幕的有效工作区等信息。这些数据对于优化网站布局、响应式设计以及实现某些交互功能至关重要...