iframe自適應高度

來自:http://ued.koubei.com/2008/05/07/iframe-auto-fit-height/這貼比較長，沒有耐性的朋友請直接拖到帖子末尾的**示例，或者直接去玩我提供的demo。

demo頁面：主頁面 iframe_a.html ，被包含頁面 iframe_b.htm 和 iframe_c.html

下面開始講：

通過google搜尋iframe 自適應高度，結果5w多條，搜尋iframe 高度自適應，結果2w多條。

我翻了前面的幾十條，刨去大量的**，有那麼三五篇是原創的。而這幾篇原創裡面，基本上只談到如何自適應靜的東西，就是沒有考慮到js操作dom之後，如何做動態同步的問題。另外，在相容性方面，也研究的不徹底。

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

可能有人還沒接觸到這個問題過，先說明一下，什麼是高度自適應吧。所謂iframe高度自適應，就是，基於介面美觀和互動的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個iframe。如果iframe始終呼叫同乙個固定高度的頁面，我們直接寫死iframe高度就可以了。而如果iframe要切換頁面，或者被包含頁面要做dom動態操作，這時候，就需要程式去同步iframe高度和被包含頁的實際高度了。

順便說下，iframe在迫不得已的時候才去用，它會給前端開發帶來太多的麻煩。

傳統做法大致有兩個：

方法一，在每個被包含頁在本身內容載入完畢之後，執行js取得本頁面的高度，然後去同步父頁面的iframe高度。

方法二，在主頁面iframe的onload事件中執行js，去取得被包含頁的高度內容，然後去同步高度。

在**維護角度考慮，方法二是優於方法一的，因為方法一，每個被包含頁都要去引入一段相同的**來做這個事情，建立了好多副本。

兩個方法都只處理了靜的東西，就是只在內容載入的時候執行，如果js去操作dom引起的高度變化，都不太方便。

如果在主視窗做乙個interval，不停的來獲取被包含頁的高度，然後做同步，是不是即方便，又解決了js操作dom的問題了呢？答案是肯定的。

demo頁面：主頁面 iframe_a.html ，被包含頁面 iframe_b.htm 和 iframe_c.html

主頁面**示例：

一直執行，效率會不會有問題？

我做了測試，同時開5個視窗（ie6、ie7、ff、opera、safari）執行這個**，不會對cpu有什麼影響，甚至調整到2ms，也沒影響（基本維持在0%佔用率）。

下面談談各瀏覽器的相容性問題，如何獲取到正確的高度，主要是對body.scrollheight和documentelement.scrollheight兩個值得比較。注意本文用的是這個doctype，不同的doctype應該不會影響結果，但是假如你的頁面沒有申明doctype，那還是先去加乙個吧。

在主頁面追加以下測試**，以輸出這兩個值，**示例：

check height

被載入頁面，可以切換乙個絕對定位的層，來使頁面高度動態改變。如果層展開，則會撐高頁面高度。**示例：

toggle overlay

下面列出以上**在各瀏覽器的測試值：

（bheight = body.scrollheight, dheight = documentelement.scrollheight, 紅色 = 錯誤值, 綠色 = 正確值）

/層隱藏時

層展開時

bheight

dheight

bheight

dheight

ie6184

184184

303ie7

184184

184303

ff184

184184

303opera

181181

300300

safari

184184

303184

暫且無視opera比別人少3畫素的問題…可以看出，如果沒有絕對定位的東西，兩個值是相等的，取哪個都無所謂。

但是如果有，那麼各個瀏覽器的表現不太相同，單取哪個值都不對。但可以找到了一條規律，那就是取兩個值得最大值可以相容各瀏覽器。所以我們的主頁面**就要改造成這樣了：

function reinitiframe()catch (ex){}
}window.setinterval("reinitiframe()", 200);

這樣子，基本解決了相容性問題。順便說下，不光絕對定位的層會影響到值，float也會導致兩個值的差異。

如果你演示demo後，會發現，除了ie，其他瀏覽器中，當層展開後再隱藏，取到的高度值還是維持在展開的高度303，而非隱藏回去的真正值184，就是說長高了之後縮不回去了。這個現象在不同被包含頁面之間做切換也會發生，當從高的頁面切換到矮頁面的時候，取到的高度還是那個高的值。

可以歸納為，當iframe窗體高度高於文件實際高度的時候，高度取的是窗體高度，而當窗體高度低於實際文件高度時，取的是文件實際高度。因此，要想辦法在同步高度之前把高度設定到乙個比實際文件低的值。所以，在iframe的新增 οnlοad=」this.height=100″，讓頁面載入的時候先縮到足夠矮，然後再同步到一樣的高度。

這個值，在實際應用中決定，足夠矮但又不能太矮，否則在ff等瀏覽器裡會有很明顯的閃爍。dom操作的時候主頁面無法監聽到，只能dom操作完了之後把高度變小了。

在我的乙個實際專案中，在成本和收益之間權衡，我並沒有做這個事情，因為每個dom函式中都要插入這個**，代價太高，其實層縮回去不縮掉也不是那麼致命。包括demo裡，也沒有去做這個事情。如果讀者有更好的方法，請告訴我。

這是最終的主頁面的**：

附demo頁面：主頁面 iframe_a.html ，被包含頁面 iframe_b.htm 和 iframe_c.html

iframe自適應高度

iframe 自適應高度

iframe高度自適應

iframe高度自適應

相關推薦