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


Posted in Javascript onNovember 30, 2011

测试例子:

<!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:

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

FF

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

OPERA:

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

SAFARI:

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

IE9:

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

IE8

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

IE7:

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

IE6

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

说明:

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()是获取滚动条尺寸,参见
https://3water.com/article/29036.htm
有什么错误欢迎指出
Javascript 相关文章推荐
用JS在浏览器中创建下载文件
Mar 05 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
详解jquery选择器的原理
Aug 01 jQuery
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
js取滚动条的尺寸的函数代码
Nov 30 #Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 #Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 #Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 #Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 #Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 #Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 #Javascript
You might like
PHP的5个安全措施小结
2012/07/17 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
layui的select联动实现代码
2019/09/28 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
python解决字典中的值是列表问题的方法
2013/03/04 Python
python控制台显示时钟的示例
2014/02/24 Python
Python分支结构(switch)操作简介
2018/01/17 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
详解Python的三种可变参数
2019/05/08 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
使用python实现学生信息管理系统
2021/02/25 Python
车间班长岗位职责
2013/11/30 职场文书
数学系个人求职信范文
2014/01/30 职场文书
工作简历自我评价
2015/03/11 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang