JS获取页面窗口大小的代码解读


Posted in Javascript onDecember 01, 2011

本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。
要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素<html>的尺寸,而不是<body>元素。
Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的<body>标签。Document对象的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 ( )函数,完成整个操作。
Javascript 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
javascript 必知必会之closure
Sep 21 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
JavaScript 基本概念
Jan 20 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 #Javascript
jQuery 中使用JSON的实现代码
Dec 01 #Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 #Javascript
JS代码放在head和body中的区别分析
Dec 01 #Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 #Javascript
js取滚动条的尺寸的函数代码
Nov 30 #Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 #Javascript
You might like
给海燕B411配件机起死回生配上件
2021/03/02 无线电
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
使用typescript构建Vue应用的实现
2019/08/26 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
python os模块简单应用示例
2019/05/23 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
店长助理岗位职责
2013/12/13 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
总经理岗位职责范本
2015/04/01 职场文书
入队仪式主持词
2015/07/04 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python