平安iframe跨域自适应框架使用指南

前言

进驻平安工作已经有1年多了,考虑平安有不同项目,各种穿插交互等,跨域自适应基本是时刻都会遇到的问题,个人就平安已完善一套通用自适应框架供平安开发同仁使用,最初开发的灵感来源于一次和百度合作app的需求(车险app计算器),让我看到了不错的调用方案,于是自己也写了一套,现在已平稳运行半年多,就此写下api方便其他开发使用。

使用指南

使用该框架须已知本身情景酌情使用,例如本身同域的iframe不用大费周折(包括已调整domain的宿主),对于跨子域又收到其他相关联的跨域dom通信和其他合作伙伴被嵌入平安,均可使用本框架,使用时载入自适应框架如下:

  1. <script type="text/javascript" src="http://chexian.pingan.com/common/js/pinganproxy.js"></script>  

载入后,对页面进行初始化设置:

  1. /**  
  2.  * 跨域自适应框架初始化方法  
  3.  **/ 
  4. ibearCross.start({  
  5.     host : 'chexian.pingan.com'// 平安父页面所在域,用于确定代理域  
  6.     fid : 'crossIframe' // 平安父页面iframe的ID   
  7. });  

最简单的自适应初始化方法如上,通常上述两个为必填参数,如果需求不够满足可以见如下其他参数的配置:

  1. /**  
  2.  * 跨域自适应框架初始化方法  
  3.  **/ 
  4. ibearCross.start({  
  5.     host : 'chexian.pingan.com'// 平安父页面所在域,用于确定代理域,默认为'www.pingan,com'  
  6.     fid : 'crossIframe'// 平安父页面iframe的ID,默认为'crossIframe'  
  7.     url : 'chexian.pingan.com/app_inc/pinganproxy.html'// 代理文件地址,如果设置则覆盖host的指向设定,通常不配置  
  8.     innerElem : $('#loginleft')[0], // dom元素,如需要计算的内部元素高度,没有传递则默认轮询documentElement || body其中最大值的高度  
  9.     domain : true// 是否对domain设置了主域设置,默认false  
  10.     minHeight : 189// 自适应时最小高度,默认为false  
  11.     delay : 100// 轮询时间间隔(单位ms),默认为200ms,如果性能要求比较苛刻可以设置大一点  
  12.     margin : 0// 额外留白空间(单位px)  
  13.     autoHeight : false //是否进行自适应轮询,默认true,如果设置为false,delay将不生效   
  14. });  

备注

如果父页面域不支持app_inc路径将不适合使用本框架。

原理

载入js并调用初始化后,页面将会建立隐藏iframe,其src地址为host域的app路径代理文件,每次轮询时将判断页面计算的高度与缓存对象高度是否有所变化,有变化后将移除本身的iframe并重新建立iframe传递参数至代理文件(此处不直接更新src是防止历史记录的副作用),接而由代理文件来执行并刷新平安父页面的iframe css高度来达到自适应效果,其中用抓包等可见iframe发出的请求参数,说明如下:

  1. /**  
  2.  * iframe的GET参数详细说明  
  3.  **/ 
  4. {  
  5.     fid : 'crossIframe'// 其父页面即平安的iframe ID  
  6.     aid : '1'// 高度变化过的次数,  
  7.     minHeight : '200'// 最小高度(如果有)  
  8.     action : 'setheight'// 改变高度  
  9.     height : '475'// 具体高度值  
  10.     domain : '0'// 是否收到domain约束,如果为1,代理文件也将设置domain为'pingan.com'  
  11.     comeform : 'ibearCross' // 代理文件将根据来源处理(即本代理文件不止作为高度自适应的代理文件,还有其他功能)   
  12. }  

小熊希望本框架能为各位平安同仁带来便利,框架将继续更新,如有新增功能及接口将随时更新本文。

  1. avatar
    Jayuh#97

    原来这篇文章这么短!

  1. 目前还没有trackbacks.

  2. Trackbacks被禁用了

发表评论 进楼快捷键: ctrl+Enter取消回复

电子邮件地址不会被公开。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>