本文主要是介绍关于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，这样可以避免“只增不减”的问题
这篇关于关于iframe高度自适应的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
