跨域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

* @Copyright   (c) ibear All Rights Reserved E-mail:[email protected] || [email protected]

*

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

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>

<meta charset=" utf-8">

<meta name="author" content="http://www.jb51.net/" />

<title>test</title>

<script type="text/javascript">

//

</script>

</head>

<body>

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

<div style="width: 1200px; margin: 0 auto;">

<iframe src="http://test-www.xxx.com/zaixiangoumai/baoxian-lufax/guoneilvyoubaoxianzzytest.shtml?WT.mc_id=AHHS-LU-PC" width="100%" scrolling="no" allowTransparency="true" frameborder="0" id="autoIframe"></iframe>

</div>

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

</body>

</html>

子页面：

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.jb51.net/" />

<title>test</title>

<script type="text/javascript">

//

</script>

</head>

<body>

<div id="main">

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

</div>

<!--0516-->

<script type="text/javascript" src="http://pscript1.4008000000.com/app_js/speed/js/pinganproxy.js"></script>

<script type="text/javascript">

$(document).ready(function(){

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

});

</script>

<!--0516-->

</body>

</html>

时间： 2024-10-19 11:25:23

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

vue初级页面 tab切换 表格动态绑定 v-for(item,index) in datas.system :value=&#39;item.values&#39;

<?php /** * Created by PhpStorm. * User: 信息部 * Date: 2017/10/26 * Time: 13:10 */ use PSI\assets\VueAsset; VueAsset::register($this); $this->title='角色添加'; ?> <style> .labels{ vertical-align:middle; margin:0; display:inline-block; height:100%

跨域cors方法（jsonp，document.domain，document.name）及iframe性质

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

viewpager+fragment三页面tab切换并且实现同时上传三个页面的信息

一:代码:首先是主页面: package com.example.admin.myviewpager; import android.content.Context;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatAc

坑爹的跨域iframe高度

如果遇到子页面跨域的问题,可通过HTML5的postMessage来实现,但前提是子页面需要主动向父页面发送信息.下面是子页面部分: <!DOCTYPE html> <head> </head> <body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');"> <h3>Got post?</h3>

【JavsScript】父子页面之间跨域通信的方法

由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 其中编号6.7两种情况同属于主域名相同的情况,可以设置domain来解决问题,今天就不讨论这种情况了. 对于其他跨域通信的问题,我想又可以分成两类: 其一(第一种情况)是a.com下面的a.

【JavaScript】父子页面之间跨域通信的方法

由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 其中编号6.7两种情况同属于主域名相同的情况,可以设置domain来解决问题,今天就不讨论这种情况了. 对于其他跨域通信的问题,我想又可以分成两类: 其一(第一种情况)是a.com下面的a.

父子页面之间跨域通信的方法

作者: lyndon  来源: 腾讯大讲堂  发布时间: 2014-08-08 08:59  阅读: 5025 次  推荐: 20   原文链接   [收藏] 由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 其中编号6.7两种情况同属于主

利用window.name+iframe跨域获取数据详解

详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.iframe是html的一个标签,可以在网页中创建内联框架,有个src属性(指向文件地址,html.php等)可以选择内联框架的内容,可以看个例子(猛戳这里),大概了解下就行了.window.name(一般在js代码里出现)的值不是一个普通的全局变量,而是当前窗口的名字,这里要注意的是每个iframe都有包

[转]父子页面之间跨域通信的方法

父子页面之间跨域通信的方法 2014/08/08 · Web前端 由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 编号 URL 说明 是否允许通信 1 http://www.a.com/a.js http://www.a.com/b.js