如何让iframe自适应高度？

在网页开发中，我们经常需要嵌入其他网页或者外部资源，这时候就会用到iframe标签。但是，如果iframe的高度固定，可能会导致页面出现滚动条或者内容被截断的情况，影响用户体验。那么，如何让iframe自适应高度呢？

方法一：使用JavaScript

我们可以使用JavaScript来动态获取iframe的高度，并将其赋值给iframe的高度属性。具体实现方法如下：

<script>
function setIframeHeight(iframe) {
    iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
}
</script>

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

上述代码中，我们定义了一个名为setIframeHeight的函数，该函数的参数为iframe。在函数内部，我们获取了iframe内部文档的高度，并将其赋值给iframe的height属性。同时，我们在iframe标签中添加了onload事件，当iframe加载完成后会自动调用setIframeHeight函数。

方法二：使用CSS

我们也可以使用纯CSS来实现iframe自适应高度。具体实现方法如下：

iframe {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

iframe[src*="youtube.com"] {
    padding-bottom: 0; /* reset aspect ratio for YouTube videos */
}

iframe[src*="vimeo.com"] {
    padding-bottom: 41.25%; /* adjust aspect ratio for Vimeo videos */
}

上述代码中，我们通过设置padding-bottom的值来实现iframe的自适应高度。其中，padding-bottom的值设置为百分比，表示iframe的高度是其宽度的百分之多少。由于大多数视频网站的视频宽高比为16:9，我们设置了默认的padding-bottom值为56.25%。同时，我们也对YouTube和Vimeo的视频进行了特殊处理，调整了其宽高比。

常见问题解答

1. 如何避免iframe被拦截？

   有些浏览器或者插件会拦截包含外部资源的iframe，导致iframe无法正常加载。为了避免这种情况，我们可以使用https协议加载iframe，或者在iframe的src属性中添加sandbox属性，限制iframe的行为。

2. 如何调整iframe的大小？

   有时候，我们需要手动调整iframe的大小。可以使用JavaScript中的resizeTo方法或者CSS中的width和height属性来实现。

3. 如何嵌入外部网页？

   在iframe的src属性中填写外部网页的链接即可。需要注意的是，外部网页必须允许跨域访问。