·您当前的位置:首页 > 技术教程 > 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. if (window.innerWidth) 
  41.  
  42. winWidth = window.innerWidth; 
  43.  
  44. else if ((document.body) && (document.body.clientWidth)) 
  45.  
  46. winWidth = document.body.clientWidth; 
  47.  
  48. //获取窗口高度 
  49.  
  50. if (window.innerHeight) 
  51.  
  52. winHeight = window.innerHeight; 
  53.  
  54. else if ((document.body) && (document.body.clientHeight)) 
  55.  
  56. winHeight = document.body.clientHeight; 
  57.  
  58. //通过深入Document内部对body进行检测,获取窗口大小 
  59.  
  60. if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
  61.  
  62.  
  63. winHeight = document.documentElement.clientHeight; 
  64.  
  65. winWidth = document.documentElement.clientWidth; 
  66.  
  67.  
  68. //结果输出至两个文本框 
  69.  
  70. document.form1.availHeight.valuewinHeight
  71.  
  72. document.form1.availWidth.valuewinWidth
  73.  
  74.  
  75. findDimensions(); 
  76.  
  77. //调用函数,获取数值 
  78.  
  79. window.onresize=findDimensions
  80.  
  81. //--> 
  82.  
  83. </script> 
  84.  
  85. </body> 
  86.  
  87. </html> 

 

热门文章推荐

请稍候...

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

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