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 相关文章推荐
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
基于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
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
Vue实现购物车功能
2017/04/27 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
Python实现备份文件实例
2014/09/16 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
怎么写有吸引力的自荐信
2013/11/17 职场文书
企业新年寄语
2014/04/04 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
老人节标语大全
2014/10/08 职场文书
明确岗位职责
2015/02/14 职场文书
立春观后感
2015/06/18 职场文书
学雷锋感言
2015/08/03 职场文书
关于车尾的标语大全
2015/08/11 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers