碼上快樂

相關內容    簡體    繁體

通過JavaScript獲取頁面大小

本文轉載自   查看原文   2012-06-04 09:49   6727    01.JS/jQuery/Ajax/ 瀏覽器/ 08.前端/性能/原型/交互

一、使用document對象的屬性設置網頁窗口的大小：

　　網頁可見區域寬：document.body.clientWidth
　　網頁可見區域高：document.body.clientHeight
　　網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)
　　網頁可見區域高：document.body.offsetHeight (包括邊線的寬)
　　網頁正文全文寬：document.body.scrollWidth
　　網頁正文全文高：document.body.scrollHeight
　　網頁被卷去的高：document.body.scrollTop
　　網頁被卷去的左：document.body.scrollLeft
　　網頁正文部分上：window.screenTop
　　網頁正文部分左：window.screenLeft
　　屏幕分辨率的高：window.screen.height
　　屏幕分辨率的寬：window.screen.width
　　屏幕可用工作區高度：window.screen.availHeight
　　屏幕可用工作區寬度：window.screen.availWidth

　　示例代碼１：

View Code
<! 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=gb2312"   />
     < title >無標題文檔 </ title >
     </ head >
< body >
< table  width ="200"  height ="1500"  border ="1"  bgcolor ="#ccc" >  
     < tr >    
         < td >此表格高度1500 </ td >
     </ tr >
</ table >
< script  language ="javascript" >
     var     s   =    ' 網頁可見區域寬(clientWidth)： ' +   document.body.clientWidth;  
        s   +=    ' \r\n網頁可見區域高(clientHeight)： ' +   document.body.clientHeight;   
        s   +=    ' \r\n網頁可見區域高(clientHeight)： ' +   document.body.clientHeight   + '   (包括邊線的寬) ' ;   
        s   +=    ' \r\n網頁可見區域高(clientHeight)： ' +   document.body.clientHeight   + '   (包括邊線的寬) ' ;   
        s   +=    ' \r\n網頁正文全文寬(clientHeight)： ' +   document.body.clientHeight;   
        s   +=    ' \r\n網頁正文全文高(clientHeight)： ' +   document.body.clientHeight;   
        s   +=    ' \r\n網頁被卷去的高(scrollTop)： ' +   document.body.scrollTop;   
        s   +=    ' \r\n網頁被卷去的左(scrollLeft)： ' +   document.body.scrollLeft;   
        s   +=    ' \r\n網頁正文部分上(screenTop)： ' +   window.screenTop;   
        s   +=    ' \r\n網頁正文部分左(screenLeft)： ' +   window.screenLeft;   
        s   +=    ' \r\n屏幕分辨率的高(height)： ' +   window.screen.height;   
        s   +=    ' \r\n屏幕分辨率的寬(width)： ' +   window.screen.width;   
        s   +=    ' \r\n屏幕可用工作區高度(availHeight)： ' +   window.screen.availHeight;  
        s   +=    ' \r\n屏幕可用工作區寬度(availWidth)： ' +   window.screen.availWidth;
    alert(s); 
 </ script >
</ body >
</ html >
　　在IE、FireFox、Netscape等不同的瀏覽器里，對於document.body 的 clientHeight、offsetHeight 和 scrollHeight 有着不同的含義，比較容易搞混，現整理一下相關的內容：

　　clientHeight：在上述瀏覽器中, clientHeight 的含義是一致的，定義為網頁內容可視區域的高度，即在瀏覽器中可以看到網頁內容的高度，通常是工具條以下到狀態欄以上的整個區域高度，與具體的網頁頁面內容無關。可以理解為，在屏幕上通過瀏覽器窗口所能看到網頁內容的高度。

　　offsetHeight：關於offsetHeight，ie和firefox等不同瀏覽中意義有所不同，需要加以區別。在ie中，offsetHeight 的取值為 clientHeight加上滾動條及邊框的高度；而firefox、netscape中，其取值為是實際網頁內容的高度，可能會小於clientHeight。

　　scrollHeight：scrollHeight都表示瀏覽器中網頁內容的高度，但稍有區別。在ie里為實際網頁內容的高度，可以小於 clientHeight；在firefox 中為網頁內容高度，最小值等於 clientHeight，即網頁實際內容比clientHeight時，取clientHeight。

　　clientWidth、offsetWidth 和 scrollWidth 的含義與上述內容雷同，不過是高度變成寬度而已。

　　若希望clientHeight、offsetHeight和scrollHeight三個屬性能取值一致的話，可以通過設置DOCTYPE，啟用不同的解析器，如：<!DOCTYPE HTML PUBLIC "DTD XHTML 1.0 Transitional">，設置DOCTYPE后，這三個屬性都表示實際網頁內容的高度。

 

　　示例代碼2：

<! 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 >
     < title >瀏覽器窗口大小 </ title >
     < meta  http-equiv ="content-type"  content ="text/html; charset=gb2312" ></ meta >
</ head >
< body >
     < h2  align ="center" >瀏覽器窗口大小 </ h2 >< hr  />
     < form  action ="#"  method ="get"  name ="form1"  id ="form1" >
         <!-- 顯示瀏覽器窗口的實際尺寸 -->
        clientHeight的值為:  < input  type ="text"  name ="clientHeight"  size ="4" />< br  />
        offsetHeight的值為:  < input  type ="text"  name ="offsetHeight"  size ="4" />< br  />
        scrollHeight的值為： < input  type ="text"  name ="scrollHeight"  size ="4" />< br  />
     </ form >
     < script  type ='text/javascript' >
        window.onload  =   function ()
        {
         var  ch  =  document.body.clientHeight;
         var  sh  =  document.body.offsetHeight;
         var  ssh  =  document.body.scrollHeight;
        
         // 結果輸出
        document.form1.clientHeight.value =  ch;
        document.form1.offsetHeight.value =  sh;
        document.form1.scrollHeight.value =  ssh;
        }
     </ script >
</ body >
</ html >

 

　　示例代碼3：

<! 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 >
     < title >請調整瀏覽器窗口 </ title >
     < meta  http-equiv ="content-type"  content ="text/html; charset=gb2312" ></ meta >
</ 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 >

 　

二、框架頁中的高度自適應：

　　在實際使用iframe的過程中，會遇到iframe高度的問題。由於被嵌套的頁面大小不固定而出現滾動條。采用JavaScript來控制iframe元素的高度，讓iframe高度自適應。另外，由於JavaScript對不同域名下權限的控制，會遇到同域、跨域的情況。

　　１、同域下的Iframe高度自適應
　　控制id為“iframeid”的iframe的高度，通過JavaScript取得被嵌套頁面最終高度，然后在主頁面進行設置來實現。
<script type="text/javascript">
function SetCwinHeight()
{
     var iframeid=document.getElementById("iframeid");  // iframe id
     if (document.getElementById)
    {
         if (iframeid && !window.opera)
        {
             if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
                iframeid.height = iframeid.contentDocument.body.offsetHeight;
            }
             else  if(iframeid.Document && iframeid.Document.body.scrollHeight)
            {
                iframeid.height = iframeid.Document.body.scrollHeight;
            }
        }
    }
}
</script> 

 頁面框架代碼：

<iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="demo.html"></iframe>

 　　2、不同域下的Iframe高度自適應

　　主頁面與被嵌套頁面不同域時，涉及到權限問題，要規避JavaScript的跨域限制。

　　具體操作，可參考以下資料中的實驗性實例代碼，可行性有待考證。

參考：①.JS獲取瀏覽器窗口大小 獲取屏幕，瀏覽器，網頁高度寬度(http://hi.baidu.com/liuleihai/blog/item/d7f18182bb817d97f703a60a.html)

　　　②.Iframe高度自適應(http://www.ccvita.com/376.html)

　　　③.關於iframe頁面高度自適應的問題( http://www.cnblogs.com/sirzxj/archive/2012/04/28/2475249.html)

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML頁面中JavaScript能獲取到的各種屏幕大小信息 JS 獲取頁面大小 用Javascript獲取頁面元素的位置 用Javascript獲取頁面元素的位置 用Javascript獲取元素在頁面中的絕對位置 Javascript獲取頁面的各種坐標匯總 javascript調用rest地址，獲取頁面值 js獲取input長度並根據頁面寬度設置大小 javascript獲取iframe框架中頁面document對象,獲取子頁面里面的內容,iframe獲取父頁面的元素, JavaScript-如何獲取頁面元素對象，元素id
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM