Javascript 获取浏览器窗口中文档(视口)可用尺寸的方法
2007-05-20 11:17
489 查看
摘要: 由于浏览器的差异,许多信息的获取都要考虑兼容性,窗口中文档可用尺寸是一个经常需要用到的信息,由于浏览器不同甚至版本不同,获取的方法也不一样,本文介绍的函数能够兼容各种浏览器,获取这一信息。同时,文章中对浏览器处理这一信息的差异也做了详细说明。
归类: Javascript,
--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------
本文所说的“浏览器窗口中文档(下面简称“视口”)可用尺寸”指浏览器中文档显示区域的尺寸,不包括标题栏、工具栏、滚动条等内容。
在处理这一信息时,不同浏览器和同一浏览器不同版本中有一些差别,说明如下:
(1)在 IE4、IE5 和 没有声明 DOCTYPE 的 IE6 中,视口的这一信息保存在“body”元素中,可以用 document.body.offsetWidth / offsetHeight 获取,
(2)在声明了DOCTYPE 的 IE6 中 ,视口的这一信息保存在 document.documentElement 中,可以用 document.documentElement.clientWidth / clientHeight 获取。
(3)除了 IE 以外的所有浏览器都将此信息保存在 window 对象中,可以用 window.innerWidth / innerHeight 获取。
因此,综合上面的说明,我们可以用下面的方式获取浏览器窗口中文档(视口)可用尺寸:
Javascript:
注意!这一信息的获取时临时的,当浏览器窗口本身大小被改变时,此信息也将跟随改变!
归类: Javascript,
关键词: window, 文档, offsetHeight, clientHeight, innerHeight, 视口, 窗口,
由于浏览器的差异,许多信息的获取都要考虑兼容性,窗口中文档可用尺寸是一个经常需要用到的信息,由于浏览器不同甚至版本不同,获取的方法也不一样,本文介绍的函数能够兼容各种浏览器,获取这一信息。同时,文章中对浏览器处理这一信息的差异也做了详细说明。--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------
本文所说的“浏览器窗口中文档(下面简称“视口”)可用尺寸”指浏览器中文档显示区域的尺寸,不包括标题栏、工具栏、滚动条等内容。
在处理这一信息时,不同浏览器和同一浏览器不同版本中有一些差别,说明如下:
(1)在 IE4、IE5 和 没有声明 DOCTYPE 的 IE6 中,视口的这一信息保存在“body”元素中,可以用 document.body.offsetWidth / offsetHeight 获取,
(2)在声明了DOCTYPE 的 IE6 中 ,视口的这一信息保存在 document.documentElement 中,可以用 document.documentElement.clientWidth / clientHeight 获取。
(3)除了 IE 以外的所有浏览器都将此信息保存在 window 对象中,可以用 window.innerWidth / innerHeight 获取。
因此,综合上面的说明,我们可以用下面的方式获取浏览器窗口中文档(视口)可用尺寸:
Javascript:
<script type="text/javascript"> // 说明:Javascript 获取浏览器窗口中文档(视口)可用尺寸的方法 // 整理:http://www.CodeBit.cn function getViewportInfo() { var w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth; var h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight; return {w:w,h:h}; }; </script>
注意!这一信息的获取时临时的,当浏览器窗口本身大小被改变时,此信息也将跟随改变!
相关文章推荐
- Javascript 获取浏览器窗口中文档(视口)可用尺寸的方法
- Javascript 获取浏览器窗口中文档(视口)可用尺寸的方法
- 通过javascript获取浏览器窗口、文档主体的实际大小以及获取终端设备(屏幕显示器)的可用大小
- Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
- 原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项
- JavaScript获取浏览器窗口的尺寸
- js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
- Javascript:获取浏览器窗口和屏幕的可用宽高
- 获取浏览器高度 窗口高度 元素尺寸 偏移属性
- javascript获取文档坐标和视口坐标
- Jquery获取窗口,浏览器,滚动条高度方法
- javascript实现浏览器窗口传递参数的方法
- JavaScript 实例:点击漫天小星星 (获取整个浏览器窗口的宽高)
- Javascript获取各种浏览器可见窗口大小
- Javascript获取获取屏幕、浏览器窗口 ,浏览器,网页高度、宽度的大小
- 跨浏览器用javascript获取窗口的位置和大小
- javascript浏览器窗口之间传递数据的方法
- javascript获取文档坐标和视口坐标
- JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_