iframe如何高度自适应

iframe是HTML中的一个标签，用于在当前页面中嵌入另一个页面。要实现iframe的高度自适应，可以通过以下几种方式：

1. 使用JavaScript动态调整iframe的高度：可以通过JavaScript获取iframe内部内容的高度，然后将该高度赋值给iframe的height属性，实现自适应。具体代码如下：

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

<iframe src="your_page_url" onload="resizeIframe(this)"></iframe>

2. 使用CSS的calc()函数：可以通过CSS的calc()函数计算iframe的高度，使其自适应。具体代码如下：

<style>
    .iframe-wrapper {
        position: relative;
        padding-bottom: calc(100% / (16 / 9)); /* 假设iframe宽高比为16:9 */
        height: 0;
        overflow: hidden;
    }
    .iframe-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

<div class="iframe-wrapper">
    <iframe src="your_page_url"></iframe>
</div>

3. 使用postMessage进行跨域通信：如果iframe内嵌的页面与当前页面不在同一个域下，可以使用postMessage方法进行跨域通信，从而获取到iframe内部内容的高度，并进行相应的调整。