JS获取页面窗口大小的代码解读

  本节代码主要使用了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 ( )函数,完成整个操作。