JS获取页面窗口大小解读

最新推荐文章于 2024-09-26 01:42:12 发布

jianqi6

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量90

点赞数

分类专栏： JavaScript 文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/jianqi6/article/details/84050385

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

技术要点

本节实例给出一个获取浏览器当前窗口大小的方法。当浏览器窗口大小变化时，显示的值会随时变化。

本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

[list]
[*]要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在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文档所在窗口的当前宽度。
[/list]
实现代码

<!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 ( )函数，完成整个操作。

文章转载自：[url]http://www.cnblogs.com/quanhai/archive/2010/04/16/1713124.html[/url]