如何实现iframe高度自适应？

在网页设计中，使用iframe嵌入其他网页或者内容是非常常见的一种方法。然而，一旦嵌入的内容高度发生变化，iframe的高度也需要跟着自适应调整，否则会出现滚动条或者内容被截断的问题。那么，如何实现iframe高度自适应呢？

方法一：使用Javascript

最常见的一种方法是使用Javascript来实现iframe高度自适应。具体思路是在iframe里面嵌入一段Javascript代码，该代码可以获取嵌入页面的高度，然后将该高度设置为iframe的高度。以下是示例代码：

<script>
function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>

<iframe src="http://www.example.com" onload="resizeIframe(this)"></iframe>

上面的代码中，首先定义了一个名为resizeIframe的函数，该函数的作用就是将传入的参数obj的高度设置为嵌入页面的高度。然后，在iframe标签里面加入了onload事件，该事件会在iframe加载完成后触发resizeIframe函数，从而实现了高度自适应。

方法二：使用CSS

除了使用Javascript之外，还可以使用CSS来实现iframe高度自适应。具体思路是使用CSS3中的calc函数计算嵌入页面的高度，并将该高度设置为iframe的高度。以下是示例代码：

<style>
iframe {
    height: calc(100% - 20px);
}
</style>

<iframe src="http://www.example.com"></iframe>

上面的代码中，首先使用CSS设置了iframe的高度为100%减去20px。由于嵌入页面的高度会影响到iframe的高度，因此通过计算100%减去20px，可以保证iframe的高度与嵌入页面的高度保持一致。

常见问题解答

1. 如何避免iframe嵌入页面的高度发生变化？

如果嵌入页面的高度经常发生变化，可以考虑使用Ajax技术将嵌入页面的内容加载到当前页面中，从而避免使用iframe。



2. 为什么使用Javascript方法实现的自适应效果比CSS方法更好？

使用Javascript方法可以在iframe加载完成后再进行高度调整，可以保证高度的准确性。而使用CSS方法则需要在页面加载时就计算高度，可能会受到网络延迟等因素影响。

3. 如何确保嵌入页面和当前页面的样式一致？

可以在嵌入页面和当前页面之间共享CSS文件，或者使用框架或者模板来确保样式的一致性。