·您当前的位置:首页 > 技术教程 > JavaScript >

[JS]用JS来取得各种浏览器的宽度很实用的源代码(3)

时间:2014-11-05 10:41酷播
!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns = http://www.w3.org/1999/xhtml head title 请调整浏览器窗口 / title meta http-e

 

  1.  < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml"> 
  6.  
  7. <head> 
  8.  
  9. <title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> 
  10.  
  11. </meta></head> 
  12.  
  13. <body> 
  14.  
  15. <h2 align="center">请调整浏览器窗口大小</h2><hr /> 
  16.  
  17. <form action="#" method="get" name="form1" id="form1"> 
  18.  
  19. <!--显示浏览器窗口的实际尺寸--> 
  20.  
  21. 浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br /> 
  22.  
  23. 浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br /> 
  24.  
  25. </form> 
  26.  
  27. <script type="text/javascript"> 
  28.  
  29. <!-- 
  30.  
  31. var winWidth = 0; 
  32.  
  33. var winHeight = 0; 
  34.  
  35. function findDimensions() //函数:获取尺寸 
  36.  
  37. { 
  38.  
  39. //获取窗口宽度 
  40.  
  41. if (window.innerWidth) 
  42.  
  43. winWidth = window.innerWidth; 
  44.  
  45. else if ((document.body) && (document.body.clientWidth)) 
  46.  
  47. winWidth = document.body.clientWidth; 
  48.  
  49. //获取窗口高度 
  50.  
  51. if (window.innerHeight) 
  52.  
  53. winHeight = window.innerHeight; 
  54.  
  55. else if ((document.body) && (document.body.clientHeight)) 
  56.  
  57. winHeight = document.body.clientHeight; 
  58.  
  59. //通过深入Document内部对body进行检测,获取窗口大小 
  60.  
  61. if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
  62.  
  63. { 
  64.  
  65. winHeight = document.documentElement.clientHeight; 
  66.  
  67. winWidth = document.documentElement.clientWidth; 
  68.  
  69. } 
  70.  
  71. //结果输出至两个文本框 
  72.  
  73. document.form1.availHeight.value= winHeight; 
  74.  
  75. document.form1.availWidth.value= winWidth; 
  76.  
  77. } 
  78.  
  79. findDimensions(); 
  80.  
  81. //调用函数,获取数值 
  82.  
  83. window.onresize=findDimensions; 
  84.  
  85. //--> 
  86.  
  87. </script> 
  88.  
  89. </body> 
  90.  
  91. </html> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器