iframe高度自適應,終於解決了


一直被iframe的高度自適應的問題困擾着,在項目中也是多次遇到。網上也有不少相關的代碼,但是總不能滿足自己的要求。在頭痛了幾次之后終於下定決心解決這個問題。

本代碼主要解決的問題是:最外層滾動條隨着iframe高度動態變化的問題。如果iframe高度比較大最外層就會出現滾動條,否則就不會。網上好多例子的問題都是iframe只保留最大的高度以至於頁面內容高度很小但是右邊還有滾動條。

話不多說,上代碼。

 1 /**
 2  * iframe自適應高度,height為手動設置的最小高度
 3  */
 4 function initIframeHeight(height){
 5     var userAgent = navigator.userAgent;
 6     var iframe = parent.document.getElementById("contentIframe");
 7     var subdoc = iframe.contentDocument || iframe.contentWindow.document;
 8     var subbody = subdoc.body;
 9     var realHeight;
10     //谷歌瀏覽器特殊處理
11     if(userAgent.indexOf("Chrome") > -1){
12         realHeight = subdoc.documentElement.scrollHeight;
13     }
14     else{
15         realHeight = subbody.scrollHeight;
16     }
17     if(realHeight < height){
18         $(iframe).height(height);
19     }
20     else{
21         $(iframe).height(realHeight);
22     }
23 }

親測谷歌、火狐、ie8+通過。第一次發博文試試水 ^_^

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM