将来的你, 肯定会感激现在拼命的自己。

js获取页面窗口大小解读

  要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在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文档所在窗口的当前宽度。

实现代码:

<html>
<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>

运行该程序后,页面出现两个文本框,分别显示窗口当前的宽度和高度,当调整浏览器窗口大小时,文本框中的数值会随之改变。



 钟永标

个人头像


 热门推荐


 热门阅读