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 相关文章推荐
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 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 explode函数实例代码
2012/02/27 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
在Python的web框架中配置app的教程
2015/04/30 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Django中FilePathField字段的用法
2020/05/21 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
英国行业制服供应商:Alexandra
2019/09/14 全球购物
医学实习生自我鉴定
2013/12/12 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
期中考试反思800字
2014/05/01 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
大国崛起英国观后感
2015/06/02 职场文书
干部培训简讯
2015/07/20 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL
MySQL三种方式实现递归查询
2022/04/18 MySQL