30.3 获取浏览器窗口大小

作者: 王润森、王俊杰出处:人民邮电出版社　2007-10-15 16:27　砖好评论条　进入论坛

阅读提示：《精通JavaScript动态网页编程》第三十章主要讲的是浏览器与性能检测，本节介绍了获取浏览器窗口大小。

30.3 获取浏览器窗口大小

本节实例给出一个获取浏览器当前窗口大小的方法。当浏览器窗口大小变化时，显示的值会随时变化。

技术要点
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码

 <!------------------------------文件名：30.3.htm------------------------------>
<!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>

运行该程序后，页面出现两个文本框，分别显示窗口当前的宽度和高度，如图30.7所示。当调整浏览器窗口大小时，文本框中的数值会随之改变，如图30.8、图30.9、图30.10所示分别是不同时刻窗口的大小。

图30.7 代码30.3.htm显示结果

图30.8 变宽后的显示结果

图30.9 变高后的显示结果

图30.10 变宽又变高后的显示结果

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

【责任编辑：杜书 TEL：（010）68476606】

回书目 上一节 下一节

关于技术浏览器窗口 DOM Netscape Window Document 精通JavaScript动态网页编程的

文章

博文

帖子

· 30.7 模拟浏览器菜单(10/15)

· 30.4 设置屏幕对象的尺寸(10/15)

· 31.2 编制自己的加密算法(10/15)

· 1.7 多交付通道(04/30)

· 1.6 富浏览器端应用(04/30)

· 珍藏奉献：世界之窗浏览器（TheWorld ）绿色奥..

· 浅谈防火墙产品的技术发展

· ORA闪回技术简介

· 技术白皮书专家评审会邀请函

· IDC运维团队技术交流总结篇————换个角度看..

· Windows清理助手+Sreng，木马查杀绝配

· 弱电技术

· 家庭发电技术资料

· 求助:WindowsServer2000下,密码被改怎么办?谢..

· Windows XP中搜索隐藏文件的两种方法

专题

我也说两句

叫好

拍砖

中国最大的网络技术网站 ·
技术成就梦想

·假期读书充电

· 第六章　你能帮我吗？..
· Linux笔试面试题选摘测..
· 08年5月软考网管上午真..
· 性能测试从零开始目录
· 08年5月软考网工上午真..
· 上周拒绝服务攻击（DDo..

· 08年5月各大网上书店及..
· 2008年5月24日软考试题..
· 软件设计师专家临考模..
· 上周网络管理员专家自..
· 网络工程师自测获奖名..
· 08年4月各大网上书店及..

排行榜

·假期读书充电 (查看6738次)
·1.2 网络定义 (查看1197次)
·《网管员必读—网络应用》自测.. (查看1090次)
·SQL Server入门到精通技术自测.. (查看1088次)
·历次技术自测获奖网友详细信息 (查看1040次)

·SQL Server入门到精通技术自测试题答案 (8个砖)
·超级网管员——网络应用技术自测试题答案 (6个砖)
·历次技术自测获奖网友详细信息 (4个砖)
·网管员全真面试题自测获奖结果及答案解析 (4个砖)
·免费讲座：搜索引擎营销打造成功网站 (3个砖)

·假期读书充电 (13个好)
·SQL Server入门到精通技术自测试题答案 (4个好)
·Visual C++数字图像处理开发入门与编程实践 (3个好)
·路由器配置自测获奖结果及答案解析 (3个好)
·《游戏开发核心技术-剧本与角色创造》阅读不枯燥 (3个好)

·Ajax+JSP网站开发从入门到精通 (06月)
·ASP.NET Ajax网站开发从入门到精通 (06月)
·非常网管——网络管理从入门到精通 (06月)
·ANT IN ACTION 第2版中文版 (06月)
·欺骗的艺术 (06月)

·ARP协议及欺骗原理
·独家体验：在西三环亲历北京免费无..

· 周末病毒预报：视频宝..
· NAC精要指南:什么是网..
· 布线测试中的常见问题..
· ASP.NET Ajax网站开发..
· 网管员必读：网络链路..
· SQL Server 2008中不推..
· 路由器故障排除实例讲解
· Cisco 认证考试费用全..

· 微软针对XP SP2的远程..
· 山东临沂网通联合公安..
· Cisco考试费用全线涨价..
· 企业无线网络设置10大..
· Windows Server 2003网..
· 上海宣判三起网络知识..
· 微软Sever 2008自带虚..
· 金山信息安全技术公司..

订阅技术快讯

电子杂志下载

名称：SQL Server数据库管理精品黄皮书
简介：书中文章经过精挑细选，便于用户能根据自己的实际工作和学习，快速在本书寻找到相关资料。内容涵盖了SQL Server的安装与升级、语句查询、数据备份和恢复、自动化任务、数据同步、数据字典、安全和预防、性能和优化、集群等各方面应用信息，以及DBA管理人员在数据库管理工作中

名称：2007路由技术大全
简介：《2007路由技术大全》由51CTO.com网站特别策划制作，该书包括路由器技术、路由器产品、路由器配置、安全设置、路由器故障处理、路由器密码恢复，以及广大网友在实践使用中的心得经验和技巧文章，内容注重实用性，适用于初学者入门，也适合多年从业者提高，是一本实践和理论完

名称：网络安全精品应用黄皮书
简介：《2007精品网络安全黄皮书》包括了9个大类24个小类， 800余篇文章，内容包含了熊猫烧香病毒、DDOS攻击、ARP病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范，涉及到了安全应用的全部领域, 由浅至深内容全面。

专题

最多好

最多砖