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 相关文章推荐
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
Openlayers学习之地图比例尺控件
Sep 28 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
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
PHP基本语法总结
2014/09/06 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
php图像验证码生成代码
2017/06/08 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
ReactRouter的实现方法
2021/01/25 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
Python实现八皇后问题示例代码
2018/12/09 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Python绘制股票移动均线的实例
2019/08/24 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
美国第一香水网站:Perfume.com
2017/01/23 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
演讲主持词
2014/03/18 职场文书
法定代表人授权委托书
2014/09/19 职场文书
国防教育标语
2014/10/08 职场文书
思想品德评语大全
2014/12/31 职场文书
子女赡养老人协议书
2016/03/23 职场文书