網頁制作技巧教程:iframe自適應高度

2024-08-26 00:16:50

字體：大中小

來源：轉載

供稿：網友

武林網(www.49028c.com)文章簡介：可能有人還沒接觸到這個問題過，先說明一下，什么是自適應高度吧。所謂iframe自適應高度，就是，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個iframe。如果iframe始終調用同一個固定高度的頁面，我們直接寫死iframe高度就可以了。而如

通過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

主頁面代碼示例：

<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>一直執行，效率會不會有問題？
我做了測試，同時開5個窗口（IE6、IE7、FF、Opera、Safari）執行這個代碼，不會對CPU有什么影響，甚至調整到2ms，也沒影響（基本維持在0%占用率）。

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

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">在主頁面追加以下測試代碼，以輸出這兩個值，代碼示例：

<div><button>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>被加載頁面，可以切換一個絕對定位的層，來使頁面高度動態改變。如果層展開，則會撐高頁面高度。代碼示例：

<div><button>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>下面列出以上代碼在各瀏覽器的測試值：
（bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 紅色 = 錯誤值, 綠色 = 正確值）

/ 層隱藏時層展開時
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

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

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也會導致兩個值的差異。

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

這是最終的主頁面的代碼：

<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{

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>

上一篇：HTML5入門教程:html5新增加的標簽集合

下一篇：iOS6新版的Safari瀏覽器增強HTML5的支持