您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > iframe自適應(yīng)高度代碼

iframe自適應(yīng)高度代碼

文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：1304 更新時(shí)間：2010-01-22 21:13 參與評(píng)論

Demo頁(yè)面：主頁(yè)面 iframe_a.html ，被包含頁(yè)面 iframe_b.htm 和 iframe_c.html

下面開(kāi)始講：

通過(guò)Google搜索iframe 自適應(yīng)高度，結(jié)果5W多條，搜索iframe 高度自適應(yīng)，結(jié)果2W多條。
我翻了前面的幾十條，刨去大量的轉(zhuǎn)載，有那么三五篇是原創(chuàng)的。而這幾篇原創(chuàng)里面，基本上只談到如何自適應(yīng)靜的東西，就是沒(méi)有考慮到JS操作DOM之后，如何做動(dòng)態(tài)同步的問(wèn)題。另外，在兼容性方面，也研究的不徹底。

這篇文章，希望在這兩個(gè)方面再做一些深入。

可能有人還沒(méi)接觸到這個(gè)問(wèn)題過(guò)，先說(shuō)明一下，什么是自適應(yīng)高度吧。所謂iframe自適應(yīng)高度，就是，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個(gè)iframe。如果iframe始終調(diào)用同一個(gè)固定高度的頁(yè)面，我們直接寫(xiě)死iframe高度就可以了。而如果iframe要切換頁(yè)面，或者被包含頁(yè)面要做DOM動(dòng)態(tài)操作，這時(shí)候，就需要程序去同步iframe高度和被包含頁(yè)的實(shí)際高度了。

順便說(shuō)下，iframe在迫不得已的時(shí)候才去用，它會(huì)給前端開(kāi)發(fā)帶來(lái)太多的麻煩。

傳統(tǒng)做法大致有兩個(gè)：
方法一，在每個(gè)被包含頁(yè)在本身內(nèi)容加載完畢之后，執(zhí)行JS取得本頁(yè)面的高度，然后去同步父頁(yè)面的iframe高度。
方法二，在主頁(yè)面iframe的onload事件中執(zhí)行JS，去取得被包含頁(yè)的高度內(nèi)容，然后去同步高度。
在代碼維護(hù)角度考慮，方法二是優(yōu)于方法一的，因?yàn)榉椒ㄒ?，每個(gè)被包含頁(yè)都要去引入一段相同的代碼來(lái)做這個(gè)事情，創(chuàng)建了好多副本。

兩個(gè)方法都只處理了靜的東西，就是只在內(nèi)容加載的時(shí)候執(zhí)行，如果JS去操作DOM引起的高度變化，都不太方便。

如果在主窗口做一個(gè)Interval，不停的來(lái)獲取被包含頁(yè)的高度，然后做同步，是不是即方便，又解決了JS操作DOM的問(wèn)題了呢？答案是肯定的。

Demo頁(yè)面：主頁(yè)面 iframe_a.html ，被包含頁(yè)面 iframe_b.htm 和 iframe_c.html

主頁(yè)面代碼示例：

<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe>
<script type="text/javascript">

function reinitIframe(){

var iframe = document.getElementById("frame_content");

try{

iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;

}catch (ex){}

}

window.setInterval("reinitIframe()", 200);

</script>

一直執(zhí)行，效率會(huì)不會(huì)有問(wèn)題？
我做了測(cè)試，同時(shí)開(kāi)5個(gè)窗口（IE6、IE7、FF、Opera、Safari）執(zhí)行這個(gè)代碼，不會(huì)對(duì)CPU有什么影響，甚至調(diào)整到2ms，也沒(méi)影響（基本維持在0%占用率）。

下面談?wù)劯鳛g覽器的兼容性問(wèn)題，如何獲取到正確的高度，主要是對(duì)body.scrollHeight和documentElement.scrollHeight兩個(gè)值得比較。注意本文用的是這個(gè)doctype，不同的doctype應(yīng)該不會(huì)影響結(jié)果，但是假如你的頁(yè)面沒(méi)有申明doctype，那還是先去加一個(gè)吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

在主頁(yè)面追加以下測(cè)試代碼，以輸出這兩個(gè)值，代碼示例：

<div><button onclick="checkHeight()">Check Height</button></div><script type="text/javascript">

function checkHeight() {

var iframe = document.getElementById("frame_content");

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

alert("bHeight:" + bHeight + ", dHeight:" + dHeight);

}

</script>

被加載頁(yè)面，可以切換一個(gè)絕對(duì)定位的層，來(lái)使頁(yè)面高度動(dòng)態(tài)改變。如果層展開(kāi)，則會(huì)撐高頁(yè)面高度。代碼示例：

<div><button onclick="toggleOverlay()">Toggle Overlay</button>

</div>

<div style="height:160px;position:relative">

<div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"></div>

</div>

<script type="text/javascript">

function toggleOverlay() {

var overlay = document.getElementById('overlay');

overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';

}

</script>

下面列出以上代碼在各瀏覽器的測(cè)試值：
（bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 紅色 = 錯(cuò)誤值, 綠色 = 正確值）

/	層隱藏時(shí)		層展開(kāi)時(shí)
/	bHeight	dHeight	bHeight	dHeight
IE6	184	184	184	303
IE7	184	184	184	303
FF	184	184	184	303
Opera	181	181	300	300
Safari	184	184	303	184

暫且無(wú)視Opera比別人少3像素的問(wèn)題…可以看出，如果沒(méi)有絕對(duì)定位的東西，兩個(gè)值是相等的，取哪個(gè)都無(wú)所謂。
但是如果有，那么各個(gè)瀏覽器的表現(xiàn)不太相同，單取哪個(gè)值都不對(duì)。但可以找到了一條規(guī)律，那就是取兩個(gè)值得最大值可以兼容各瀏覽器。所以我們的主頁(yè)面代碼就要改造成這樣了：

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);

這樣子，基本解決了兼容性問(wèn)題。順便說(shuō)下，不光絕對(duì)定位的層會(huì)影響到值，float也會(huì)導(dǎo)致兩個(gè)值的差異。

如果你演示Demo后，會(huì)發(fā)現(xiàn)，除了IE，其他瀏覽器中，當(dāng)層展開(kāi)后再隱藏，取到的高度值還是維持在展開(kāi)的高度303，而非隱藏回去的真正值184，就是說(shuō)長(zhǎng)高了之后縮不回去了。這個(gè)現(xiàn)象在不同被包含頁(yè)面之間做切換也會(huì)發(fā)生，當(dāng)從高的頁(yè)面切換到矮頁(yè)面的時(shí)候，取到的高度還是那個(gè)高的值。
可以歸納為，當(dāng)iframe窗體高度高于文檔實(shí)際高度的時(shí)候，高度取的是窗體高度，而當(dāng)窗體高度低于實(shí)際文檔高度時(shí)，取的是文檔實(shí)際高度。因此，要想辦法在同步高度之前把高度設(shè)置到一個(gè)比實(shí)際文檔低的值。所以，在iframe的添加 onload=”this.height=100″，讓頁(yè)面加載的時(shí)候先縮到足夠矮，然后再同步到一樣的高度。
這個(gè)值，在實(shí)際應(yīng)用中決定，足夠矮但又不能太矮，否則在FF等瀏覽器里會(huì)有很明顯的閃爍。DOM操作的時(shí)候主頁(yè)面無(wú)法監(jiān)聽(tīng)到，只能DOM操作完了之后把高度變小了。
在我的一個(gè)實(shí)際項(xiàng)目中，在成本和收益之間權(quán)衡，我并沒(méi)有做這個(gè)事情，因?yàn)槊總€(gè)DOM函數(shù)中都要插入這個(gè)代碼，代價(jià)太高，其實(shí)層縮回去不縮掉也不是那么致命。包括Demo里，也沒(méi)有去做這個(gè)事情。如果讀者有更好的方法，請(qǐng)告訴我。

這是最終的主頁(yè)面的代碼：

<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"
 onload="this.height=100"></iframe>

<script type="text/javascript">

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);

</script>

附Demo頁(yè)面：主頁(yè)面 iframe_a.html ，被包含頁(yè)面 iframe_b.htm 和 iframe_c.html

如果只考慮FX和IE，并且，iframe里面內(nèi)容也不進(jìn)行DOM操作，那仍然可以用最簡(jiǎn)單的傳統(tǒng)處理方式：

<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" 
onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>

---------------------------------

a.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  <title>a</title>
 </head>
 <body>
  <div style="border:1px dotted;width:400px">
   <iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" 
onload="this.height=100"></iframe>
  </div>
  <div><button onclick="checkHeight()">Check Height</button></div>
  <script type="text/javascript">
   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);
   
   function checkHeight() {
    var iframe = document.getElementById("frame_content");
    var bHeight = iframe.contentWindow.document.body.scrollHeight;
    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
    alert("bHeight:" + bHeight + ", dHeight:" + dHeight);
   }
  </script>
 </body>
</html>