網頁布局中iframe高度自適應問題總結

      大家平時在做網站布局的時候，常常會用到iframe架構布局，iframe的高度與常常與被包圍頁面高度不一樣，這會影響頁面美觀。這時候，就需要程式去同步iframe高度和被包含頁的實際高度了。

      這裡總結一下做法：

下面是iframe的聲明：<div><iframe src="main.aspx" width="100%" id="main" name="main" scrolling="no" frameborder="0" onload="Javascript:SetIframeHeight()"  ></iframe></div> 擷取iframe的高度： var bodyHeight=iframe.contentWindow.document.body.scrollHeight;擷取被包圍頁的高度： var elementHeight=iframe.contentWindow.document.documentElement.scrollHeight;

在IE6下輸出的高度：

在IE8下輸出兩高度：

在FireFox 3.5.3下輸出兩高度：

可見，不同的瀏覽器下擷取的高度值是不一樣的，包括在IE6,IE7下擷取的高度值會有稍微的差別，但測試的總體結果是被包圍頁面的高度比iframe高度的值大，網上聽說Safari瀏覽器測試時被包圍頁面的高度比iframe高度的值小。這時就要根據兩者的高度來解決幾種主流瀏覽器的相容性的問題了，主要代碼如下：

 

代碼

 function SetIframeHeight()
 {
     var iframe=document.getElementById("main");
     
     try
     {
        var bodyHeight=iframe.contentWindow.document.body.scrollHeight;
        var elementHeight=iframe.contentWindow.document.documentElement.scrollHeight;
        //alert("inframe的高度:"+bodyHeight+"， 被包圍頁面的高度:"+elementHeight);    
        var height=Math.max(bodyHeight,elementHeight);
        iframe.height=height;    
     }
     catch(ex)
     {
        
     }
     window.setInterval("SetIframeHeight",300);//主要解決被包含頁面要做DOM動態操作,有可能帶來效能的影響
 }

但是，如果自己把iframe的高度設定很大，比被包圍頁面的高度要大，這時網頁的下面還是會出現空白，所以在設定iframe高度時要盡量設定小些。但覺得主要相容主流瀏覽器即可，即寫成下面：

代碼

  function SetIframeHeight()   //在我電腦和同學電腦IE 6.0     IE 8.0    Firefox 3.5.3下測試通過，不知道別人測試能否通過不
 {
     var iframe=document.getElementById("main");
     
     try
     {
         iframe.contentWindow.document.documentElement.scrollHeight; 
     }
     catch(ex)
     {
        
     }
     window.setInterval("SetIframeHeight",300);//主要解決被包含頁面要做DOM動態操作,有可能帶來效能的影響
 }

 

不過我覺得寫的人自己去權衡吧，呵呵

網上還有一種常用的做法：

 

 

代碼

<script language="javascript"> 
//輸入你希望根據頁面高度自動調整高度的iframe的名稱的列表 
//用逗號把每個iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一個表單，則不用逗號。 
//定義iframe的ID 
var iframeids=["test"]; 
//如果使用者的瀏覽器不支援iframe是否將iframe隱藏 yes 表示隱藏，no表示不隱藏 
var iframehide="yes"; 
function dyniframesize() 
{ 
var dyniframe=new Array() 
for (i=0; i<iframeids.length; i++) 
{ 
if (document.getElementById) 
{ 
//自動調整iframe高度 
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); 
if (dyniframe[i] && !window.opera) 
{ 
dyniframe[i].style.display="block"; 
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果使用者的瀏覽器是NetScape 
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; 
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果使用者的瀏覽器是IE 
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; 
} 
} 
//根據設定的參數來處理不支援iframe的瀏覽器的顯示問題 
if ((document.all || document.getElementById) && iframehide=="no") 
{ 
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]); 
tempobj.style.display="block"; 
} 
} 
} 
if (window.addEventListener) 
window.addEventListener("load", dyniframesize, false); 
else if (window.attachEvent) 
window.attachEvent("onload", dyniframesize); 
else 
window.onload=dyniframesize; 
</script> 

 

 原理是在iframe所在頁面不斷掃描iframe包含文檔的內容高度並改變iframe自身高度，不知對頁面速度和系統資源佔用是否有影響。

如果要做到各種瀏覽器都相容覺得有點難度，請問高手們還有其他好的方法？能解決IE6,IE7,IE8,Firefox,Opera等瀏覽器下的相容性問題。