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 相关文章推荐
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
JavaScript 对象创建的3种方法
Nov 17 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桌面中心(三) 修改数据库
2007/03/11 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
php导出CSV抽象类实例
2014/09/24 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
PHP多进程简单实例小结
2019/11/09 PHP
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
python静态方法实例
2015/01/14 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
党委书记个人对照检查材料
2014/09/15 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
布达拉宫的导游词
2015/02/02 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书