获得网页窗口实际大小的javascript代码实例_js 网页实际大小-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangli865621030/article/details/11855417

本文提供了一个JavaScript函数用于获取浏览器窗口的实际尺寸，包括宽度和高度，并通过一个实例演示了如何将这些信息显示在网页上。

    java script代码：


function get_page_size()
 {
     var re = {};
     if (document.documentElement && document.documentElement.clientHeight)
     {
         var doc = document.documentElement;
         re.width = (doc.clientWidth>doc.scrollWidth)?doc.clientWidth-1:doc.scrollWidth;
         re.height = (doc.clientHeight>doc.scrollHeight)?doc.clientHeight:doc.scrollHeight;
     }
     else
     {
         var doc = document.body;
         re.width = (window.innerWidth>doc.scrollWidth)?window.innerWidth:doc.scrollWidth;
         re.height = (window.innerHeight>doc.scrollHeight)?window.innerHeight:doc.scrollHeight;
     }
     return re;
 }

904 viewed 3 comment(s) 

     代码实例：


<!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> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>获取窗口大小</title> 
 <script type="text/java script"> 
 function getPageSize() 
 { 
     var re = {}; 
     if (document.documentElement && document.documentElement.clientHeight) 
     { 
         var doc = document.documentElement; 
         re.width = (doc.clientWidth>doc.scrollWidth)?doc.clientWidth-1:doc.scrollWidth; 
         re.height = (doc.clientHeight>doc.scrollHeight)?doc.clientHeight:doc.scrollHeight; 
     } 
     else 
     { 
         var doc = document.body; 
         re.width = (window.innerWidth>doc.scrollWidth)?window.innerWidth:doc.scrollWidth; 
         re.height = (window.innerHeight>doc.scrollHeight)?window.innerHeight:doc.scrollHeight; 
     } 
     //结果输出至两个文本框 
    document.form1.availHeight.value= re.width; 
     document.form1.availWidth.value= re.height; 
     return re; 
 } 
 </script> 
 </head> 
 <body> 
 <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/java script"> 
 getPageSize(); 
 window.onresize=getPageSize; 
 </script> 
 </body> 
 </html>