首页  ·  知识 ·  前端
JavaScript获取浏览器窗口的大小
网友    综合  编辑:dezai   图片来源:网络
程序首先建立一个表单,包含两个文本框,用于显示窗口当前的宽度和高度,并且,其数值会随窗口大小的改变而变化。

程序演示:
获取浏览器当前窗口大小。当浏览器窗口大小变化时,显示的值会随时变化。

浏览器窗口的实际宽度:
浏览器窗口的实际高度:
程序主要使用了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文档所在窗口的当前宽度。

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;

程序实现步骤:

程序首先建立一个表单,包含两个文本框,用于显示窗口当前的宽度和高度,并且,其数值会随窗口大小的改变而变化。
在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。
然后,在函数findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者保存在前述两个变量中。
再通过深入Document内部对body进行检测,获取窗口大小,并存储在前述两个变量中。
在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。
在JavaScript代码的最后,通过调用findDimensions ( )函数,完成整个操作。

本文作者:网友 来源:网络
CIO之家 www.ciozj.com 微信公众号:imciow
   
免责声明:本站转载此文章旨在分享信息,不代表对其内容的完全认同。文章来源已尽可能注明,若涉及版权问题,请及时与我们联系,我们将积极配合处理。同时,我们无法对文章内容的真实性、准确性及完整性进行完全保证,对于因文章内容而产生的任何后果,本账号不承担法律责任。转载仅出于传播目的,读者应自行对内容进行核实与判断。请谨慎参考文章信息,一切责任由读者自行承担。
延伸阅读