一直被iframe的高度自適應(yīng)的問題困擾著，在項(xiàng)目中也是多次遇到。網(wǎng)上也有不少相關(guān)的代碼，但是總不能滿足自己的要求。在頭痛了幾次之后終于下定決心解決這個(gè)問題。

本代碼主要解決的問題是：最外層滾動條隨著iframe高度動態(tài)變化的問題。如果iframe高度比較大最外層就會出現(xiàn)滾動條，否則就不會。網(wǎng)上好多例子的問題都是iframe只保留最大的高度以至于頁面內(nèi)容高度很小但是右邊還有滾動條。

話不多說，上代碼。

1 /** 2 * iframe自適應(yīng)高度，height為手動設(shè)置的最小高度 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+通過。第一次發(fā)博文試試水 ^_^

?

轉(zhuǎn)載于:https://www.cnblogs.com/weish/p/5358799.html

總結(jié)

以上是生活随笔為你收集整理的iframe高度自适应，终于解决了的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。