Demo頁面：主頁面 iframe_a.html ,，被包含頁面 iframe_b.htm 和 iframe_c.html
下面開始講：
通過Google搜索iframe 自適應(yīng)高度,，結(jié)果5W多條，搜索iframe 高度自適應(yīng),，結(jié)果2W多條,。
我翻了前面的幾十條，刨去大量的轉(zhuǎn)載,，有那么三五篇是原創(chuàng)的,。而這幾篇原創(chuàng)里面，基本上只談到如何自適應(yīng)靜的東西,，就是沒有考慮到JS操作DOM之后,，如何做動態(tài)同步的問題。另外,，在兼容性方面,，也研究的不徹底。
這篇文章,，希望在這兩個方面再做一些深入,。
可能有人還沒接觸到這個問題過，先說明一下,，什么是高度自適應(yīng)吧,。所謂iframe高度自適應(yīng),，就是,，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar,，讓人看不出它是個iframe,。如果iframe始終調(diào)用同一個固定高度的頁面，我們直接寫死iframe高度就可以了,。而如果iframe要切換頁面,，或者被包含頁面要做DOM動態(tài)操作，這時候,，就需要程序去同步iframe高度和被包含頁的實(shí)際高度了,。
順便說下，iframe在迫不得已的時候才去用,，它會給前端開發(fā)帶來太多的麻煩,。
傳統(tǒng)做法大致有兩個：
方法一，在每個被包含頁在本身內(nèi)容加載完畢之后,，執(zhí)行JS取得本頁面的高度,，然后去同步父頁面的iframe高度,。
方法二，在主頁面iframe的onload事件中執(zhí)行JS,，去取得被包含頁的高度內(nèi)容,，然后去同步高度。
在代碼維護(hù)角度考慮,，方法二是優(yōu)于方法一的,，因?yàn)榉椒ㄒ唬總€被包含頁都要去引入一段相同的代碼來做這個事情,，創(chuàng)建了好多副本,。
兩個方法都只處理了靜的東西，就是只在內(nèi)容加載的時候執(zhí)行,，如果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>
一直執(zhí)行,，效率會不會有問題？
我做了測試,，同時開5個窗口（IE6,、IE7、FF,、Opera,、Safari）執(zhí)行這個代碼，不會對CPU有什么影響,，甚至調(diào)整到2ms,，也沒影響（基本維持在0%占用率）。
下面談?wù)劯鳛g覽器的兼容性問題,，如何獲取到正確的高度,，主要是對body.scrollHeight和documentElement.scrollHeight兩個值得比較。注意本文用的是這個doctype,，不同的doctype應(yīng)該不會影響結(jié)果,，但是假如你的頁面沒有申明doctype，那還是先去加一個吧,。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd">
在主頁面追加以下測試代碼,，以輸出這兩個值,，代碼示例：
<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>
被加載頁面，可以切換一個絕對定位的層,，來使頁面高度動態(tài)改變。如果層展開,，則會撐高頁面高度,。代碼示例：
<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>
下面列出以上代碼在各瀏覽器的測試值：
（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像素的問題…可以看出,，如果沒有絕對定位的東西，兩個值是相等的,，取哪個都無所謂,。
但是如果有,，那么各個瀏覽器的表現(xiàn)不太相同,，單取哪個值都不對,。但可以找到了一條規(guī)律,，那就是取兩個值得最大值可以兼容各瀏覽器。所以我們的主頁面代碼就要改造成這樣了：
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)致兩個值的差異。
如果你演示Demo后,，會發(fā)現(xiàn),，除了IE，其他瀏覽器中,，當(dāng)層展開后再隱藏,，取到的高度值還是維持在展開的高度303，而非隱藏回去的真正值184,，就是說長高了之后縮不回去了,。這個現(xiàn)象在不同被包含頁面之間做切換也會發(fā)生,，當(dāng)從高的頁面切換到矮頁面的時候，取到的高度還是那個高的值,。
可以歸納為,，當(dāng)iframe窗體高度高于文檔實(shí)際高度的時候，高度取的是窗體高度,，而當(dāng)窗體高度低于實(shí)際文檔高度時,，取的是文檔實(shí)際高度,。因此,，要想辦法在同步高度之前把高度設(shè)置到一個比實(shí)際文檔低的值,。所以,，在iframe的添加 onload=”this.height=100″,，讓頁面加載的時候先縮到足夠矮,，然后再同步到一樣的高度,。
這個值，在實(shí)際應(yīng)用中決定,，足夠矮但又不能太矮，否則在FF等瀏覽器里會有很明顯的閃爍,。DOM操作的時候主頁面無法監(jiān)聽到,，只能DOM操作完了之后把高度變小了。
在我的一個實(shí)際項(xiàng)目中,，在成本和收益之間權(quán)衡，我并沒有做這個事情,，因?yàn)槊總€DOM函數(shù)中都要插入這個代碼,，代價太高，其實(shí)層縮回去不縮掉也不是那么致命,。包括Demo里，也沒有去做這個事情,。如果讀者有更好的方法,，請告訴我。
這是最終的主頁面的代碼：
<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頁面： 主頁面 iframe_a.html ，被包含頁面 iframe_b.htm 和 iframe_c.html
