js实时获取浏览器窗口尺寸

 

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3  <html xmlns="http://www.w3.org/1999/xhtml">
4  <head>
5  <title>请调整浏览器窗口</title>
6  <meta http-equiv="content-type" content="text/html; charset=gb2312">
7 </head>
8 <body>
9 <h2 align="center">请调整浏览器窗口大小</h2><hr>
10 <form action="#" method="get" name="form1" id="form1">
11 <!--显示浏览器窗口的实际尺寸-->
12 浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
13 浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
14 </form>
15 <script type="text/javascript">
16 var winWidth = 0;
17 var winHeight = 0;
18 function findDimensions() //函数:获取尺寸
19 {
20 //获取窗口宽度
21 if (window.innerWidth)
22 winWidth = window.innerWidth;
23 else if ((document.body) && (document.body.clientWidth))
24 winWidth = document.body.clientWidth;
25 //获取窗口高度
26 if (window.innerHeight)
27 winHeight = window.innerHeight;
28 else if ((document.body) && (document.body.clientHeight))
29 winHeight = document.body.clientHeight;
30 //通过深入Document内部对body进行检测,获取窗口大小
31 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
32 {
33 winHeight = document.documentElement.clientHeight;
34 winWidth = document.documentElement.clientWidth;
35 }
36 //结果输出至两个文本框
37 document.form1.availHeight.value= winHeight;
38 document.form1.availWidth.value= winWidth;
39 }
40 findDimensions();
41 //调用函数,获取数值
42 window.onresize=findDimensions;
43 </script>
44 </body>
45 </html>

 

 

 

posted on 2010-06-20 21:40  riacool  阅读(2995)  评论(0编辑  收藏  举报

导航