对于浏览器窗口来说,通过获取<html>标签的clientWidth和clientHeight属性就可以得到浏览器窗口的可视宽度和高度,由于<html>标签在脚本中表示为document.documentElement,因此可以这样设计:
var w=document.documentElement.clientWidth;
var h=document.documentElement.clientHeight;
不过在IE 6.0以下版本的浏览器中(即在IE浏览器的“怪异”解析模式下),body是最顶层的可视元素,而html元素保持隐藏,因此只有通过<body>标签的clientWidth和clientHeight属性才可以得到浏览器窗口的可视宽度和高度,而<body>标签在脚本中表示为document.body,要兼容IE“怪异”解析模式可以这样设计:
var w=document.body.clientWidth;
var h=document.body.clientHeight;
然而,支持DOM解析模式的浏览器都把body视为一个普通的块级元素,而<html>标签包含整个浏览器窗口。因此,考虑浏览器的兼容性,可以这样设计,如果浏览器支持DOM标准,那么使用documentElement对象读取body元素,若该对象不存在,则使用body对象读取body元素:
var w=document.documentElement.clientWidth||document.body.clientWidth;
var h=document.documentElement.clientHeight||document.body.clientHeight;
如果窗口包含内容超出了窗口可视区域,那么应该使用scrollWidth和scrollHeight属性来获取窗口的实际宽度和高度。不过对于document.documentElement和document.body来说,不同浏览器对于它们的支持略有差异。例如:
<body >
<p >
</p>
</body>
<script language="javascript"type="text/javascript">
var wb=document.body.scrollWidth;
var hb=document.body.scrollHeight;
var wh=document.documentElement.scrollWidth;
var hh=document.documentElement.scrollHeight;
</script>
不同浏览器的scrollHeight和scrollWidth返回值比较见表6.6。
通过上面的返回值比较可以看出,不同浏览器使用documentElement对象获取浏览器窗口的实际尺寸是一致的,但使用Body对象获取对应尺寸就会存在很大差异,特别是Firefox浏览器,它把scrollWidth与clientWidth属性值视为相等,显然这是错误的。