原帖地址:http://www.zhangxinxu.com/wordpress/?p=1294
一直困扰很久的iframe内嵌页面的高度自适应问题,终于找到一个比较好的解决方案。使iframe高度自适应,能有效防止2层滚动条导致页面显示不友好,并造成鼠标中键滚动不匹配的问题。
解决办法实际上仍是通过子页面传递参数给主页面,主页面通过调用JS来控制iframe高度;但是其中使用锚点传参的方式比较特别,直接借鉴。iframe高度自适应的主要问题不在于主页面获取高度并设置iframe的高度,而在于子页面会由于页面操作导致页面高度的动态变更,此时如果主页面不做相应的调整,则滚动条仍可能出现。
最终的方案如下:
- 子页面引入一个脚本,该脚本实现了iframe页面的高度获取;
- 子页面增加一个定时器,并通过定时器定时获取页面的实时高度(文中指出2ms都不会影响CPU利用率);
- 获取实时高度后将该值传递给父页面;
- 父页面设置新高度;