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 相关文章推荐
Angularjs基础知识及示例汇总
Jan 22 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
jQuery实现元素的插入
Feb 27 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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实现插入排序
2015/03/29 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
JS验证字符串功能
2017/02/22 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
js实现无缝滚动双图切换效果
2019/07/09 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
node.js基础知识汇总
2020/08/25 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
Python 元类使用说明
2009/12/18 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
python安装gdal的两种方法
2019/10/29 Python
Python实现仿射密码的思路详解
2020/04/23 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
幼儿园社区活动总结
2014/07/07 职场文书
社区文艺活动方案
2014/08/19 职场文书
教书育人演讲稿
2014/09/11 职场文书
稽核岗位职责
2015/02/10 职场文书
安全守法证明
2015/06/23 职场文书
python munch库的使用解析
2021/05/25 Python
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL
Hive日期格式转换方法总结
2022/06/25 数据库