iframe高度自适应解决方案

5 篇文章 0 订阅

 1   引言

在网页中,我们经常的需要嵌入Iframe实现简单的局部刷新和内容整合,但是常常因为iframe的高度智能设置成为固定的值而没有办法适应各种变化的页面,导致出现了比较不友好的滚动条,iframe的滚动条和本页面的滚动条造成了非常不友好的操作方式和视觉感官;

2   从子页面访问父页面

父页面:拥有iframe的页面;

子页面:被嵌入的页面;

 

在每一个待嵌入的页面中加入一段JS脚本,如下:

 

  

原理是每次在子页面被加载之时,子页面都会获取自己的页面高度,然后通过parent句柄访问父页面的iframe,设置其高度为自身页面高度;

 

3   从父页面访问子页面

从子页面访问父页面有几大缺点:

l  不保证子页面都可以自定义,如果你嵌入的是别的应用的内容,你无法保证每个页面都能加入该脚本;

l  强耦合;一个子页面是一个独立的内容单元,从这个角度上来看,这段脚本属于代码污染;

l  代码分散;程序员不得不在每个子页面中都加入一个该页面,如果有1000个页面,就必须写1000段这个的脚本;

 

于是,我们在父页面中加入该段脚本:

              

 

道理如2;只不过从父页面的角度去实现该设置;

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值