iframe高度自适应

原帖地址：http://www.zhangxinxu.com/wordpress/?p=1294

 

      一直困扰很久的iframe内嵌页面的高度自适应问题，终于找到一个比较好的解决方案。使iframe高度自适应，能有效防止2层滚动条导致页面显示不友好，并造成鼠标中键滚动不匹配的问题。

 

      解决办法实际上仍是通过子页面传递参数给主页面，主页面通过调用JS来控制iframe高度；但是其中使用锚点传参的方式比较特别，直接借鉴。iframe高度自适应的主要问题不在于主页面获取高度并设置iframe的高度，而在于子页面会由于页面操作导致页面高度的动态变更，此时如果主页面不做相应的调整，则滚动条仍可能出现。

      最终的方案如下：

1. 子页面引入一个脚本，该脚本实现了iframe页面的高度获取；
2. 子页面增加一个定时器，并通过定时器定时获取页面的实时高度（文中指出2ms都不会影响CPU利用率）；
3. 获取实时高度后将该值传递给父页面；
4. 父页面设置新高度；