zoukankan      html  css  js  c++  java
  • 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>

    运行该程序后,页面出现两个文本框,分别显示窗口当前的宽度和高度,如图30.7所示。当调整浏览器窗口大小时,文本框中的数值会随之改变,如图30.8、图30.9、图30.10所示分别是不同时刻窗口的大小。

         图30.7  代码30.3.htm显示结果                         图30.8  变宽后的显示结果

            图30.9  变高后的显示结果                     图30.10  变宽又变高后的显示结果

    源程序解读

    (1)程序首先建立一个表单,包含两个文本框,用于显示窗口当前的宽度和高度,并且,其数值会随窗口大小的改变而变化。

    (2)在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。

    (3)然后,在函数findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者保存在前述两个变量中。

    (4)再通过深入Document内部对body进行检测,获取窗口大小,并存储在前述两个变量中。

    (5)在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。

    (6)在JavaScript代码的最后,通过调用findDimensions ( )函数,完成整个操作。

  • 相关阅读:
    oracle 各个版本下载地址
    学习笔记(三)--->《Java 8编程官方参考教程(第9版).pdf》:第十章到十二章学习笔记
    mysql5.7安装教程图解
    myeclipse2017 安装包及破解插件的下载
    MyEclipse 2017 ci6 安装反编译插件(本人自己摸索的方法,亲测可行)
    Myeclipse10.7安装git插件并将Java项目上传到码云(github)
    IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结
    IntelliJ IDEA使用教程
    IntelliJ idea 中使用Git
    IntelliJ Idea 集成svn 和使用
  • 原文地址:https://www.cnblogs.com/quanhai/p/1713124.html
Copyright © 2011-2022 走看看