经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根据子页面的高度调整父页面中iframe的高度,这就要求 页面必须具有自适应功能。自适应思想比较简单:就是父页面中iframe高度必须要适时根据子页面 高度进行调整。 由于涉及到js操作,因此对于不同域名的自适应解决方案有所不同,主要是在解决跨域问题。

 

  •   对于同父级域名下的自适应高度:jipiao.taobao.com/index.htm 页面中嵌入jiudian.taobao.com/xxx.htm页面

       iframe自适应高度解决方案

  1.0   http://jipiao.taobao.com/index.htm中关键代码


 

2.子页面http://jiudian.taobao.com/xxx.htm 中嵌入如下代码。即可。

 

  • 不同父级页面,例如jipiao.taobao.com, www.koubei.com域名完全不一样,解决办法是使用一个代理页面jipiao.taobao.com/proxy.htm jipiao.taobao.com/index.htm页面嵌入 www.koubei.com/xxxx.htm,而xxx.htm需要隐藏嵌入jipiao.taobao.com/proxy.htm做为代理,可以将高度写在后面jipiao.taobao.com/proxy.htm#500,表示500px高度。
  • iframe自适应高度解决方案

   1.jipiao.taobao.com/index.htm页面中关键代码:

  

增加如下JS:

2. www.koubei.com/xxxx.htm 中关键代码:

 

3.在代理页面jipiao.taobao.com/proxy.htm中所有的代码如下:

相关文章:

  • 2022-02-07
  • 2021-12-12
  • 2021-12-12
  • 2021-11-23
  • 2022-02-07
  • 2021-12-12
  • 2021-12-12
猜你喜欢
  • 2021-10-30
  • 2021-12-28
  • 2022-03-03
  • 2021-11-05
  • 2022-12-23
  • 2021-05-19
  • 2021-05-20
相关资源
相似解决方案