本文详细解析如何使用JavaScript获取当前浏览器窗口的实际宽度和高度。针对Netscape、IE及DOM标准环境下的差异，文章提供了包含window.innerWidth、document.body.clientWidth及document.documentElement属性的兼容代码。通过实时监听窗口大小变化事件，确保页面能动态显示最新的窗口尺寸，适用于需要响应式布局或窗口状态监控的场景。
获取窗口尺寸的原理与浏览器差异
本段代码主要依赖Document对象中关于窗口属性的相关功能，以下将逐一解析这些属性的具体作用与使用方式。
获取窗口尺寸的方法因浏览器类型而异：在Netscape浏览器中，需直接调用Window对象的属性；在IE浏览器中，需深入Document内部对body元素进行检测；而在符合DOM标准的浏览器中，获取窗口尺寸应关注根元素<html>的尺寸，而非<body>元素。
Window对象的innerWidth属性用于返回当前窗口的内部宽度，而innerHeight属性则用于返回当前窗口的内部高度。
Document对象的body属性对应HTML文档中的<body>标签；documentElement属性则指向HTML文档的根节点。
document.body.clientHeight表示HTML文档所在窗口的当前高度，而document.body.clientWidth表示HTML文档所在窗口的当前宽度。
多浏览器兼容的代码实现
具体实现代码如下：
<!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">
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口 的实际高度: <input type="text" name="availHeight" size="4"><br>
浏览器窗口 的实际宽度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight &&
document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions(); //调用函数，获取数值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>运行该程序后，页面会显示两个文本框，分别展示窗口当前的宽度和高度。当用户调整浏览器窗口大小时，文本框内的数值会实时更新，反映不同时刻的窗口尺寸。
代码逻辑详细解析
源程序解读
（1）程序首先构建一个包含两个文本框的表单，用于显示窗口的当前宽度和高度，且数值会随窗口大小改变而动态更新。
（2）在JavaScript代码部分，首先定义winWidth和winHeight两个变量，用于存储窗口的高度和宽度值。
（3）在findDimensions()函数中，优先使用window.innerHeight和window.innerWidth获取窗口的高度和宽度，并将结果存入前述变量。
（4）若上述方法不可用，则通过检测Document内部的body元素来获取窗口大小，并更新变量。
（5）函数末尾，通过名称访问表单元素，将计算结果输出到两个文本框中。
（6）在JavaScript代码的最后部分，通过调用findDimensions()函数完成初始操作，并监听窗口大小变化事件。