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 CSS选择器笔记
Mar 29 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 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
SONY SRF-40W电路分析
2021/03/02 无线电
一个程序下载的管理程序(三)
2006/10/09 PHP
简单的PHP图片上传程序
2008/03/27 PHP
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
JavaScript之引用类型介绍
2012/08/10 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
Python3处理文件中每个词的方法
2015/05/22 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
python使用Tesseract库识别验证
2018/03/21 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
ORACLE十问
2015/04/20 面试题
abstract class和interface有什么区别
2013/08/04 面试题
法人委托书的范本格式
2014/09/11 职场文书
库房管理员岗位职责
2015/02/12 职场文书
紧急通知
2015/04/17 职场文书
60句有关成长的名言
2019/09/04 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP