跨域IFRAME自适应高度(子页面TAB切换不同的高度，主页面IFRAME嵌套子页面自适应高度)

Posted 2020-07-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跨域IFRAME自适应高度(子页面TAB切换不同的高度，主页面IFRAME嵌套子页面自适应高度)相关的知识，希望对你有一定的参考价值。

1、pinganproxy.html

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">eval(function(p,a,c,k,e,r){e=function(c){return(c<a?‘‘:e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!‘‘.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return‘\\w+‘};c=1};while(c--)if(k[c])p=p.replace(new RegExp(‘\\b‘+e(c)+‘\\b‘,‘g‘),k[c]);return p}(‘8 u=9(d,f,g){d=d!=l?d+\‘\‘:l;f=f||v.I;g=g==\‘#\‘?\‘#\‘:\‘?\‘;8 h={},j,n,2,i,7,5,w=(9(){m d?9(a,b){8 c;3(a[0]==b){c=a[1];3(c!=l){o{6=x(c)}p(e){6=c}}y{6=z 0}m 6}}:9(a){8 b;b=a[1];3(b!=l){o{h[a[0]]=x(b)}p(e){h[a[0]]=b}}}})();3(f.A(g)>-1){j=f.q(g)[1];7=j.A(\‘#\‘);3(7>-1){j=j.J(0,7)}n=j.q("&");K(i=0,5=n.B;i<5;i++){2=n[i].q("=");7=w(2,d);3(7!=l){m 7}}}m d?z 0:h},4=u();C();9 D(){8 a=4.L,6,2,5;3(a&&(2=k.k.r.M(a))){6=2}y{2=k.k.r.N(\‘O\‘);5=2.B;P(5--){3(2[5].Q==k){6=2[5];s}}}m 6}9 C(){8 a;o{R(4.S){E\‘T\‘:U(\‘V(k){\‘+4.W+\‘}\‘);s;E\‘X\‘:3(~~4.F){r.F=v.Y.Z(/\\.(.*(\\.G\\.10|G)*)$/)[1]}3(a=D()){a.11.12+=\‘;t:\‘+(4.t<+4.H?4.H:4.t)+\‘13;\‘}s;14:}15.16()}p(17){}}‘,62,70,‘||temp|if|opts|len|result|cache|var|function||||||||||str|parent|null|return|strs|try|catch|split|document|break|height|getUrlValue|location|fn|decodeURIComponent|else|void|indexOf|length|setCrossSize|getCrossIframe|case|domain|com|minHeight|href|slice|for|fid|getElementById|getElementsByTagName|iframe|while|contentWindow|switch|comeform|ibearDoFunc|eval|with|action|ibearCross|hostname|match|cn|style|cssText|px|default|window|close|err‘.split(‘|‘),0,{}))</script></body></html>

http://pscript1.4008000000.com/app_js/speed/js/pinganproxy.js

/**

* @Abstract 小熊跨域自适应框架

* @Author iBear

* @Datatime 20120609

* @Modified 20140928

* @Version 0.3

* @WebSite http://jser.in

* 子页面初始化调用函数，备注中还有*为可选参数，其余为推荐填写参数

ibearCross.start({

host : ‘baoxian.pingan.com‘, // 代理主域配置，缺省www.pingan.com

url : ‘baoxian.pingan.com/app_inc/pinganproxy.html‘, //*代理文件配置，缺省为{{ host }}/app_inc/pinganproxy.html，如果填写url参数，则无需再指定host参数

innerElem : $(‘#main‘)[0], // 内部计算高度所依赖的元素（使用这个会使计算高度时，更为精准，必须以body内部的某个元素来计算，例如body > div#main这样就计算#main的高度来自适应）

fid : ‘frame‘, //*父页面iframe的id（写入id，轮询时能更加减少性能损耗）

margin : 0, //*底部预留的间距，缺省0（单位px，且无需写单位）

delay : 400, //*轮询时间段控制，缺省200ms

domain : false, //*是否需要重设代理domain为顶级无二级域

minHeight : 0, //*最小高度，缺省0（单位px，且无需写单位）

autoHeight : true, //*是否进行轮询，缺省true

deep : false //*是否深度计算高度，缺省false（目前版本支持尚不完美，不建议使用）

});

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?‘‘:e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!‘‘.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return‘\\w+‘};c=1};while(c--)if(k[c])p=p.replace(new RegExp(‘\\b‘+e(c)+‘\\b‘,‘g‘),k[c]);return p}(‘~4(j,k,l){6 m=\‘8\‘,8=j[m]||{},V=j.V||{1m:4(){}},C=D(\‘C\‘);3(!C){C="1n-1o"}j[m]=8={L:5,x:\‘/1p/1q.1r\‘,n:D(\‘n\‘)||\‘\‘,E:1,q:1s,y:\‘1t.1u.1v\‘,W:5,1w:5,r:s,z:s,F:5,1x:s,M:\‘8\‘,A:0,t:5,9:D(\‘9\‘)||s,B:1y,X:4(a){a=a||{};2.y=a.y||2.y;2.x=a.x||Y.1z+\‘//\‘+2.y+2.x;2.n=a.n||2.n;2.A=a.A||2.A;2.q=a.q||2.q;2.z=!!a.z;2.9=a.9||2.9;2.B=a.B!==s;2.r=!!a.r||s;2.t=a.t||5},G:4(){6 a=0,i,o,7,r=2.r;3(r){7=k.7;o=7.N;i=o.Z;1A(i--){3(7.N[i].1B==1){a+=7.N[i].O}}}P{3(2.t){a=(10.11=="12 13 14")?2.t.H:2.t.H}P{a=(10.11=="12 13 14")?15.16(k.7.H,k.17.H):15.16(k.7.O,k.17.O)}}v a+2.A},18:4(u){2.L=2.Q(u);2.E++},19:4(a){3(a===R 0){a=2.G()}2.18("1a=1b&I="+a)},Q:4(u){6 a;3(a=k.1C(\‘1c\‘)){k.7.1D(a)}6 b;b=k.1E(\‘1F\‘);b.1G=\‘1c\‘;b.1H=\‘1I\‘;b.1J=2.x+\‘?n=\‘+8.n+\‘&E=\‘+8.E+(8.9?\‘&9=\‘+8.9:\‘\‘)+(u?\‘&\‘+u:\‘&1a=1b&I=\‘+8.G())+\‘&z=\‘+~~2.z+\‘&M=\‘+2.M;b.1K.1L=\‘1M:1d; 1e:0; I:0; 1f:1d; \‘;b.1e=b.I=b.1N=b.1f=0;v k.7.1O(b)},1P:4(b){6 c=2,o;2.X(b);1Q(2.F);c.L=2.Q();3(2.B||2.9){c.S=0;6 d=4(){6 a=c.G();3(c.S!=a){c.S=a;c.19()}3(c.B){c.F=1g(d,c.q)}};2.F=1g(d,2.q)}}};4 D(d,f,g){d=d!=5?d+\‘\‘:5;f=f||Y.W;g=g==\‘#\‘?\‘#\‘:\‘?\‘;6 h={},w,J,o,i,p,T,1h=(4(){v d?4(a,b){6 c;3(a[0]==b){c=a[1];3(c!=5){1i{K=1j(c)}1k(e){K=c}}P{K=R 0}v K}}:4(a){6 b;b=a[1];3(b!=5){1i{h[a[0]]=1j(b)}1k(e){h[a[0]]=b}}}})();3(f.1l(g)>-1){w=f.U(g)[1];p=w.1l(\‘#\‘);3(p>-1){w=w.1R(0,p)}J=w.U("&");1S(i=0,T=J.Z;i<T;i++){o=J[i].U("=");p=1h(o,d);3(p!=5){v p}}}v d?R 0:h}}(1T,1U);‘,62,119,‘||this|if|function|null|var|body|ibearCross|minHeight||||||||||||||fid|temp|cache|delay|deep|false|innerElem||return|str|url|host|domain|margin|autoHeight|mathor_url|getUrlValue|aid|timer|getDocHeight|scrollHeight|height|strs|result|iframe_el|comeform|childNodes|offsetHeight|else|createFrame|void|old_height|len|split|console|href|setup|location|length|navigator|appName|Microsoft|Internet|Explorer|Math|max|documentElement|postAction|setHeight|action|setheight|AUTO_Iframe|none|width|border|setTimeout|fn|try|decodeURIComponent|catch|indexOf|log|iqsz|d0649|app_inc|pinganproxy|html|200|www|pingan|com|time|signA|true|protocol|while|nodeType|getElementById|removeChild|createElement|iframe|id|scrolling|no|src|style|cssText|display|frameborder|appendChild|start|clearTimeout|slice|for|window|document‘.split(‘|‘),0,{}))

==========================方案==============================

1、在父页面所在站点（生产环境和测试环境）根目录下的/app_inc/目录中放一个pinganproxy.html文件。

2、在子页面加入http://pscript1.4008000000.com/app_js/speed/js/pinganproxy.js 文件的引用。

3、再执行初始化方法

ibearCross.start({

host : ‘ 代理地址（如：pad-life-dmzstg1.pingan.com.cn）‘

innerElem : $(‘#main‘)[0], // 子页面内部计算高度所依赖的元素（使用这个会使计算高度时，更为精准，必须以body内部的某个元素来计算，例如body > div#main这样就计算#main的高度来自适应）

minHeight : 0 //*最小高度，缺省0（单位px，且无需写单位）

});

黄色区域你要自己根据环境确定，host填顶层嵌套我们的页面域名

innerElem为需要计算高度的元素，如果要精准，就一定要加，传递原生dom对象

父页面的域名docshare.pingan.com.cn下要部署你发的附件作为代理页面（pinganproxy.html），子页面加载js并初始化就可以了

code

主页面：

<!DOCTYPE html>

<html>

<head>

</script>

</head>

<body>

<div style="height: 200px; background-color: #dbdbdb;">header</div>

</div>

<div style="height: 200px; background-color: #dbdbdb;">footer</div>

</body>

</html>

子页面：

<!DOCTYPE html>

<html>

<head>

</script>

</head>

<body>

TAB切换，页面高度不一，实现主页自适应高度！

</div>

$(document).ready(function(){

ibearCross.start({host :"baoxian-dmzstg1.pa18.com",innerElem:$(‘#main‘)[0],minHeight:"0"});

});

</script>

</body>

</html>

以上是关于跨域IFRAME自适应高度(子页面TAB切换不同的高度，主页面IFRAME嵌套子页面自适应高度)的主要内容，如果未能解决你的问题，请参考以下文章

IE8下IFrame 和子页面的通信

跨域下的iframe自适应高度

iframe的跨域高度自适应（通过跨域页面中嵌套本域页面）

总结iframe高度自适应，自适应子页面高度

iframe高度自适应

完美实现跨域Iframe高度自适应Iframe跨域高度自适应解决方案