iframe的內容增高或縮減時設置其iframe的高度的處理方案

　　WEB管理軟件每每是以下結構的

　　

　　用戶點擊子頁tab切換中部的顯示內容，在切換過程當中須要保證前面的子頁保持先前的狀態。這種狀況通常都使用iframe來來做爲切換的子頁顯示內容。

　　可是這裏有一個問題，iframe不能作高度（height）的自適應。理想狀態是當iframe高度超過中部內容顯示區的高度的時候iframe自動增高，這樣主頁面會出現滾動條來作適應。處理方式即不斷計算iframe內部元素高度設置iframe

　　因此計算iframe裏面的內容的高度即是關鍵（兼容IE8+）。

　　首先，不能使用文檔document的高度，由於document的高度可能不是iframe裏面的內容的真實高度（當body的高度小於iframe的window高度的時候，document的高度其實是window的高度。）。並且一旦使用document的高度來設置iframe的高度，那麼document的高度只會增長不會減小（當設置了iframe的高度後，那麼不管iframe裏面的內容如何變更，iframe的document的高度就會至少是iframe的高度），那麼將致使iframe愈來愈高。因此這裏使用body的高度（參考關於瀏覽器window、document、html、body高度的探究）來計算iframe內容的高度。

　　其次，使用body的高度後，那些脫離文檔流的元素則須要手動計算其撐開iframe的高度。計算方法是

　　脫離文檔流元素撐開iframe的高度 = 脫離文檔流元素的高度 + 脫離文檔流元素離文檔頂部的高度 + 離窗口底部的餘留空間

　　而後計算每一個脫離文檔流元素撐開的高度取其中最大的值再和body比較，取出最大的最終iframe內容高度值。

　　實現代碼以下（iframe中引用）

//供主頁面調用
//設置iframe高度 
function setActiveIframeHeight(){ 
    //計算iframe內容的高度
　　function getBodyHeight(){ 
　　　　var height = 0; 
　　　　if (document) { 
　　　　　　height = $(document.body).height();//Math.max(document.body.clientHeight,document.body.offsetHeight); 
　　　　　　//獲取iframe中顯示的脫離文檔流的元素
　　　　　　var panels = $('.page-shadow.active'),
　　　　　　pHeight = 0; 
　　　　　　//計算其中最大的值
　　　　　　for(var i = 0; i < panels.length; i++){
　　　　　　　　//計算撐開iframe的高度
　　　　　　　　var panelContent = $(panels[i]), 
　　　　　　　　panelContentHeight = panelContent.height() + panelContent.offset().top + 50; 
　　　　　　　　pHeight = (panelContentHeight > pHeight)?panelContentHeight:pHeight; 
　　　　　　} 
　　　　　　height = (pHeight > height)?pHeight:height; 
　　　　} 
　　　　return height; 
　　} 
　　var curHeight = getBodyHeight(),
　　//這裏使用#right-content-test自適應來探測中部內容顯示區域的最小高度
　　minHeight = top.$('#right-content-test').height(),
    //獲取iframe元素     
　　htmlDom = top.$('.tab-content>.active').find('iframe')[0]; 

　　curHeight = (minHeight >= curHeight) ? minHeight : curHeight; 
   
   //top.activeIframeHeight記錄了當前的iframe的的高度     
　　if(htmlDom && htmlDom.height != top.activeIframeHeight){ 
　　　　htmlDom.height = top.activeIframeHeight; 
　　} 
        
　　//防止臨界值致使滾動條時有時無使用Math.abs處理 
　　if(setActiveIframeHeight.isFirst || (Math.abs(top.activeIframeHeight - curHeight) > 2)){ 
　　　　top.activeIframeHeight = curHeight; 
　　　　htmlDom && (htmlDom.height = top.activeIframeHeight); 
　　} 
　　setActiveIframeHeight.isFirst = 0; 
}
setActiveIframeHeight.isFirst  = 1;

　　間隔一段時間調用setActiveIframeHeight便可。

　　

　　若是以爲本文不錯，請點擊右下方【推薦】！