一直被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+通过。第一次发博文试试水 ^_^
来源:https://www.cnblogs.com/weish/p/5358799.html