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 相关文章推荐
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
angular简介和其特点介绍
Jan 29 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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
yii框架源码分析之创建controller代码
2011/06/28 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
详解Django 时间与时区设置问题
2019/07/23 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
初中生学习生活的自我评价
2013/11/20 职场文书
党员学习十八大感想
2014/01/17 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js