兼容多瀏覽器的iframe自適應(yīng)高度(ie8 、谷歌瀏覽器4.0和 firefox3.5.3)

更新時(shí)間：2009年11月04日 23:54:46 作者：

iframe在ie8 、谷歌瀏覽器4.0和 firefox3.5.3均成功自適應(yīng)高度.

小項(xiàng)目龍里中學(xué)多媒體教室管理系統(tǒng)中后臺管理用到了iframe.由于要?jiǎng)討B(tài)載入內(nèi)容,所以需要iframe自適應(yīng)內(nèi)容頁的高度.用谷歌搜索到很多答案,其中成功的是這段代碼

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function SetCwinHeight() { 
var iframeid = document.getElementById("maincontent1"); //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代碼:

復(fù)制代碼代碼如下:

 
<iframe style="z-index: 1; visibility: inherit; width: 100%;" name="maincontent1" 
onload="Javascript:SetCwinHeight()" height="1" id="maincontent1" src="<%=ResolveClientUrl("~/message")%>" 
marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe> 

在IE8下成功實(shí)現(xiàn)自適應(yīng)高度,但在谷歌瀏覽器高度只會增加,不會減少,也就是說,長高后就縮不回來.
那么各個(gè)瀏覽器的表現(xiàn)不太相同，單取哪個(gè)值都不對。但可以找到了一條規(guī)律，那就是取兩個(gè)值得最大值可以兼容各瀏覽器。所以我們的主頁面代碼就要改造成這樣了：

復(fù)制代碼代碼如下:

 
function reinitIframe(){var iframe = document.getElementById("frame_content"); 
try{ 
var bHeight = iframe.contentWindow.document.body.scrollHeight; 
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; 
var height = Math.max(bHeight, dHeight); 
iframe.height = height; 
}catch (ex){} 
} 
window.setInterval("reinitIframe()", 200); 

這樣子，基本解決了兼容性問題。順便說下，不光絕對定位的層會影響到值，float也會導(dǎo)致兩個(gè)值的差異。
如果你演示Demo后，會發(fā)現(xiàn)，除了IE，其他瀏覽器中，當(dāng)層展開后再隱藏，取到的高度值還是維持在展開的高度303，而非隱藏回去的真正值184，就是說長高了之后縮不回去了。這個(gè)現(xiàn)象在不同被包含頁面之間做切換也會發(fā)生，當(dāng)從高的頁面切換到矮頁面的時(shí)候，取到的高度還是那個(gè)高的值。
可以歸納為，當(dāng)iframe窗體高度高于文檔實(shí)際高度的時(shí)候，高度取的是窗體高度，而當(dāng)窗體高度低于實(shí)際文檔高度時(shí)，取的是文檔實(shí)際高度。因此，要想辦法在同步高度之前把高度設(shè)置到一個(gè)比實(shí)際文檔低的值。所以，在iframe的添加 onload=”this.height=100″，讓頁面加載的時(shí)候先縮到足夠矮，然后再同步到一樣的高度。
這個(gè)值，在實(shí)際應(yīng)用中決定，足夠矮但又不能太矮，否則在FF等瀏覽器里會有很明顯的閃爍。DOM操作的時(shí)候主頁面無法監(jiān)聽到，只能DOM操作完了之后把高度變小了。
在我的一個(gè)實(shí)際項(xiàng)目中，在成本和收益之間權(quán)衡，我并沒有做這個(gè)事情，因?yàn)槊總€(gè)DOM函數(shù)中都要插入這個(gè)代碼，代價(jià)太高，其實(shí)層縮回去不縮掉也不是那么致命。包括Demo里，也沒有去做這個(gè)事情。如果讀者有更好的方法，請告訴我。
/**********************************原文引用結(jié)束***************************** /
請注意紅色的這句.讀到這里,我想在改變iframe.height之前可否先給 iframe.height賦一個(gè)夠小的初始值,如iframe.height="10px",然后再改變?nèi)鏸frame.height.這樣就解決了原文紅色部分的問題。
最終代碼如下:

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function SetCwinHeight() { 
var iframeid = document.getElementById("maincontent1"); //iframe id 
iframeid.height = "10px";//先給一個(gè)夠小的初值,然后再長高. 
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代碼仍然不變:

復(fù)制代碼代碼如下:

 
<iframe style="z-index: 1; visibility: inherit; width: 100%;" name="maincontent1" 
onload="Javascript:SetCwinHeight()" height="1" id="maincontent1" src="<%=ResolveClientUrl("~/message")%>" 
marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe> 

經(jīng)測試,iframe在ie8 、谷歌瀏覽器4.0和 firefox3.5.3均成功自適應(yīng)高度.

您可能感興趣的文章: