关于iframe高度自适应的问题

iframe的作用

嵌套网页，只需要写一份外壳代码，然后嵌入不断变化的子页面

iframe的问题

我们在使用iframe的时候，大多数情况下都不希望看到它的滚动条。从用户的角度看，并不能发现这是一个父子嵌套型页面。隐藏滚动条很简单，设置scrolling属性为’no’即可。但如何让iframe的高度自适应子页面高度，这就是个比较难的问题了。

在网络上搜索这个话题，你会找到许多解决方案，其本质都是先获取子页面高度，然后将iframe的高度调整为这个值。不过，当你实际去使用的时候，你会发现具体实现并不简单。

不同的浏览器对页面高度的解释不同

子页面的加载需要时间，尤其是动态渲染的页面

子页面在操作过程中，高度有可能改变

问题解决方案

1、首先，你需要获取子页面的document对象

2、然后，你需要确定boby.scrollHeight和body.offsetHeight的区别，以及如何选择

3、最后，使用window.setInterval(function(){},time)间隔一段时间查询一下子页面的高度，如果和iframe的高度不同，就重新设置iframe的高度

缺点

这个方法相当于一直有个线程在运行，为了使用户的体验不是太糟糕，间隔时间time的值应该小于等于500ms，对页面性能会有一定程度的影响

更新

offsetHeight的兼容性在IE，Firefox，Chrome中是较好的

设置 iframe 高度时，先将其置0，这样可以避免“只增不减”的问题