呼呼,搞了大半天,总算弄明白了为何用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 955一个很小的失误,耗了我2个小时的时间。 func ... -
【phenomenon】onscroll事件绑定
2011-09-05 13:34 873情况: $(function){ window ... -
关于报错和undefined
2011-08-09 17:03 8121.在全局范围内,变量必须要用var 声明,不然会报错。在局部 ... -
关于匿名函数
2011-07-05 11:13 11081.关于匿名函数的申请与执行 (function(){ ... -
JavaScript的保留字和关键字
2011-06-21 14:48 1325JavaScript 关键字 break false ... -
ECMAScript 与 正则表达式
2011-06-14 14:47 15421.String.match()与RegExp.exec() ... -
ECMAScript 等性运算符 和原始类型
2011-06-08 11:54 8291.关于类型 ECMAScript分为原始类型 和 ... -
JavaScript中事件绑定局部函数
2010-09-02 10:51 1093<!DOCTYPE html PUBLIC &quo ...
相关推荐
### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中,获取浏览器显示区域的大小是非常重要的一个环节,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...
### JavaScript 获取浏览器临时目录知识点详解 #### 一、概述 在Web开发中,有时需要获取浏览器的临时目录以便进行文件操作或数据缓存等任务。然而,由于浏览器安全策略的限制,JavaScript直接获取本地文件系统...
### JS 获取浏览器窗口大小 在前端开发中,经常需要获取浏览器窗口的大小,以便于根据不同的屏幕尺寸调整页面布局或实现响应式设计。本文将详细介绍如何使用JavaScript来获取浏览器窗口的宽度、高度以及相关的属性...
在web开发中,调整浏览器窗口大小是常见的用户操作之一,JavaScript提供了一种机制,允许我们在窗口大小变化时执行特定的代码。这篇文章的重点是介绍如何使用JavaScript中的window对象的onresize事件来实现当浏览器...
在本文中,我们将深入探讨如何利用JavaScript来实现自定义浏览器窗口的功能,包括窗口拖动、放大缩小、最小化以及全屏操作。 一、窗口拖动 在JavaScript中,我们可以使用事件监听来实现窗口拖动的功能。首先,我们...
本文将详细介绍如何使用JavaScript获取各种浏览器窗口的大小,并解释这些方法的兼容性及其适用场景。 首先,最直接的方法是通过浏览器提供的Window对象的属性来获取窗口尺寸。Window对象提供了`innerWidth`和`...
在JavaScript中,获取浏览器窗口、屏幕以及网页的高度和宽度是常见的需求,这在网页布局、动态调整元素尺寸、响应式设计等方面非常有用。以下是一些关键的JavaScript属性和方法,用于获取这些信息: 1. **网页可见...
在JavaScript中,监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一:适用于IE浏览器,仅在关闭时提示 ```javascript window....
javascript, 获取各种浏览器相关信息和获取电脑PC的信息, 磁盘, 主板, CPU等
其中一项常见需求是获取浏览器窗口的各种属性值,比如宽度、高度等,这对于响应式设计或某些特定功能(如弹窗位置计算)非常有用。 #### 一、主要窗口属性 在提供的代码示例中,通过`getInfo`函数展示了如何获取一...
JavaScript各种主流浏览器的调试包括搜狗、谷歌、QQ等(我是搬运工)
在网页开发中,经常需要获取浏览器的可见窗口大小,以便调整布局或执行某些基于视口尺寸的操作。本文将深入探讨如何使用 JavaScript 在不同浏览器中获取页面高度。 首先,我们有两个基本属性可以用来获取页面的宽度...
在JavaScript中获取浏览器参数是一项常见的任务,这有助于开发者更好地了解用户环境,以便提供更好的兼容性和个性化体验。这篇博文“JS 获取浏览器参数”可能探讨了如何利用JavaScript来收集关于用户浏览器的信息,...
使用 JavaScript 获取客户端字体列表是非常有用的,因为 JavaScript 可以在所有浏览器中运行。我们可以使用 JavaScript 创建一个字体下拉菜单,然后使用 JavaScript 获取客户端字体列表。 实现获取客户端字体列表的...
在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别: [removed]function getInfo(){ var s = “”; s += ...
在这个例子中,监听的是"resize"事件,当用户调整浏览器窗口大小时触发。 2. **设备像素比(devicePixelRatio)**: - `window.devicePixelRatio` 是一个表示设备物理像素与CSS像素之间比例的属性。在大多数现代...
博文链接:https://zhanglingsi.iteye.com/blog/243677
浏览器大小 获取浏览器的窗口大小和限制的调整大小事件。安装npm install browser-size --save用法创建一个新的浏览器大小实例并添加一个监听器 var browser = require ( 'browser-size' ) ( )browser . on ( '...
本文主要讨论了如何使用JavaScript代码获取浏览器的类型和版本信息。在Web开发中,获取用户浏览器的相关信息是非常有用的,它可以帮助开发者判断用户的浏览环境,并根据不同的浏览器提供更合适的网页内容或进行功能...