js获取浏览器的可视区域尺寸的实现代码

测试例子：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
body{ border: 10px solid red;}
#inner{width: 2000px; height: 2000px; border: 5px solid blue;}
</style>
</head>
<body>
<div id="inner"></div>
</body>
</html>

结果：

chrome：

FF

OPERA:

SAFARI:

IE9:

IE8

IE7:

IE6

说明：

Chrome/FF/Safari/opera
对这些浏览器而言，window有个属性innerWidth/innerHeight包含的是整个文档的可视区域尺寸，注意，这个尺寸是包含滚动条大小的。
如果我们不计滚动条的影响，就可以直接使用这两个属性。
如果滚动条会影响（比如最大化弹出框），那么应该想另外的办法。


Document对象是每个DOM树的根，但是它并不代表树中的一个HTML元素，document.documentElement属性引用了作为文档根元素的html标记，document.body属性引用了body标记
我们这里获取常见的三个值（scrollWidth、offsetWidth和clientwidth）来比较一下


document.documentElement.scrollWidth返回整个文档的宽度
document.documentElement.offsetWidth返回整个文档的可见宽度
document.documentElement.clientwidth返回整个文档的可见宽度（不包含边框），clientwidth = offsetWidth - borderWidth
不过一般来说，我们不会给document.documentElement来设置边框，所以这里的clientwidth 与 offsetWidth一致


document.body.scrollWidth返回body的宽度
注意，这里的scrollWidth有个不一致的地方，基于webkit的浏览器（chrome和safari）返回的是整个文档的宽度，也就是和document.documentElement.scrollWidth一致，
opera和FF返回的就是标准的body 的scrollWidth，个人觉得opera和FF算是比较合理的。
document.body.offsetWidth返回body的offsetWidth
document.body.clientwidth返回body的clientwidth（不包含边框），clientwidth = offsetWidth - borderWidth


我们看上面的例子，会发现body和documentElement的有些值是相等的，这并不是表示他们是等同的。而是因为当我们没有给body设置宽度的时候，document.body默认占满整个窗口宽度，于是就有：
document.body.scrollWidth = document.documentElement.scrollWidth
document.body.offsetWidth = document.documentElement.offsetWidth
document.body.clientwidth = document.documentElement.clientwidth - document.body.borderWidth（body的边框宽度）
当我们给body设置了一个宽度的时候，区别就出来了。


IE9/IE8
这两个差不多，唯一的区别是IE9包含window.innerWidth属性，而IE8不包含window.innerWidth属性。
document.documentElement.scrollWidth返回整个文档的宽度，和FF等浏览器一致
document.documentElement.offsetWidth返回整个文档的可见宽度（包含滚动条，值和innerWidth一致），注意，这里和FF等浏览器又有点区别。
document.documentElement.clientwidth返回整个文档的可见宽度（不包含边框），和FF等浏览器一致。clientwidth = offsetWidth - 滚动条宽度


document.body.scrollWidth返回body的宽度，注意，这里的scrollWidth和FF等浏览器有点区别，这里并不包括body本身的border宽度。
因此例子中，相比FF少了10px。
document.body.offsetWidth返回body的offsetWidth，和FF等浏览器一致
document.body.clientwidth返回body的clientwidth（不包含边框），和FF等浏览器一致，clientwidth = offsetWidth - borderWidth


IE7
IE7与IE9/IE8的主要区别是
第一、document.documentElement.offsetWidth的返回值不一样，
参见上面说的，IE9/IE8的document.documentElement.offsetWidth包含滚动条，但是，IE7的document.documentElement.offsetWidth不包含滚动条。
第二、document.documentElement.scrollWidth返回整个文档的宽度，注意，这里和IE9/IE8、FF等浏览器又有不一致，对于IE9/IE8、FF等浏览器，scrollWidth最小不会小于窗口的宽度，但是在IE下没有这个限制，文档有多小，这个就有多小
其他倒是挺一致的。


最后是IE6了
IE6的document.documentElement返回值与IE9/IE8没有区别（由此可见，对于document.documentElement，IE7就是个奇葩）。
话说回来，IE的document.body就是个奇葩，当没有给body设置宽度的时候，body是默认占满整个文档的（注意，其他的浏览器都是占满整个窗口），当然，最小值是整个窗口的大小，就是说body指向了根元素。
因此，在算上IE6在解析width方面的bug，和其他的浏览器的区别就淋漓尽致了。
document.body.scrollWidth返回body的宽度，和IE9/IE8/IE7一致
document.body.offsetWidth返回body的offsetWidth，注意，由于body的不同，这里的offsetWidth = scrollWidth + borderWidth
document.body.clientwidth返回body的clientwidth（不包含边框）clientwidth = offsetWidth - borderWidth
另外，有一点和IE7同样，就是document.documentElement.scrollWidth没有最小宽度限制。

总结一下，在标准模式下，我们获取文档可见区域的方法如下：


代码如下:

function getViewSizeWithoutScrollbar(){//不包含滚动条
return {
width : document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
function getViewSizeWithScrollbar(){//包含滚动条
if(window.innerWidth){
return {
width : window.innerWidth,
height: window.innerHeight
}
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){
return {
width : document.documentElement.offsetWidth,
height: document.documentElement.offsetHeight
}
}else{
return {
width : document.documentElement.clientWidth + getScrollWith(),
height: document.documentElement.clientHeight + getScrollWith()
}
}
}

getScrollWith()是获取滚动条尺寸，参见
http://www.jb51.net/article/29036.htm
有什么错误欢迎指出

赞 (0)

相关推荐

  • jsp 获取客户端的浏览器和操作系统信息

    string agent = request.getheader("user-agent"); stringtokenizer st = new stringtokenizer(agent,";"); st.nexttoken(); //得到用户的浏览器名 string userbrowser = st.nexttoken(); //得到用户的操作系统名 string useros = st.nexttoken(); 取得本机的信息也可以这样: 操作系统信息 sys

  • 用js小类库获取浏览器的高度和宽度信息

    用js小类库获取浏览器的高度和宽度信息

    因此当用户在一个较长内容的网页中点击某一个按钮显示DIV层会发现没有任何效果(其实已经在页面的顶部显示了),因此,我们需要准备的知道用户当前的浏览的位置的信息.在实现这个要求之前,先来看看在js中有哪些工具可以让我们使用: 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth + " (包括边线和滚动条的宽)"; 网页可见区域

  • js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 复制代码 代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码 复制代码 代码如下: document.documentElement.clientWidth document.documentElement.cli

  • js 获取浏览器高度和宽度值(多浏览器)

    js 获取浏览器高度和宽度值(多浏览器)

     IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.

  • 用js获取电脑信息(是使用与IE浏览器)

    用js获取本地电脑信息(但是只能在IE浏览器下才行,其他浏览器其获取不到的): 复制代码 代码如下: <!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"&

  • js获取鼠标位置杂谈附多浏览器兼容代码

    其实获得鼠标位置就是一句话的事情,但是要是不了解浏览器间的区别,整个过程就会让人很郁闷,区别在与: 1.IE下获得x和y轴的距离分别用event.x和event.y: FF下获得x和y轴的距离分别用event.pageX和event.pageY: 2.IE下用此方法获得的位置是不算滚动条滚过的位置的,即它只会算到浏览器边缘: FF则会算进滚过去的那些位置: (这个地方很让我崩溃,为这么点小区别我把所有用到的程序全部重写了一遍,囧死--) 解决1的办法,无非是判断一下浏览器,然后用什么方式: 解决

  • js 获取屏幕各种宽高的方法(浏览器兼容)

    屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网

  • js获取元素在浏览器中的绝对位置

    JavaScript中提供获取HTML元素位置的属性: HTMLElement.offsetLeft HTMLElement.offsetHeight 但 是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值.那么如何得到一个HTML元素的绝对位置呢,可以用以下函数: 复制代码 代码如下: //获取元素的纵坐标 function getTop(e){ var o

  • js获取浏览器基本信息大全

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

  • js获取键盘按键响应事件(兼容各浏览器)

    复制代码 代码如下: <script type="text/javascript" language=JavaScript charset="UTF-8">document.onkeydown=function(event){var e = event || window.event || arguments.callee.caller.arguments[0];if(e && e.keyCode==27){ // 按 Esc //要做的

  • JS完整获取IE浏览器信息包括类型、版本、语言等等

    复制代码 代码如下: <html> <head> <title>JS完整获取IE浏览器信息</title> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="435" border="1&q

随机推荐