iframe高度自适应撑开

iframe的高度自适应通常是为了让它能够根据嵌入的内容动态调整，以便于显示完整的内容。这在内容不确定长度或者用户可能滚动查看的情况下非常有用。实现iframe高度自适应的方法有：

1. 初始设置：在HTML中，你可以通过CSS设置一个相对单位的高度（如百分比），并添加一些JavaScript来处理窗口大小变化。

<iframe src="..." style="height: 100%; width: 100%;"></iframe>

2. 使用JavaScript监听：可以利用window.onresize事件，在窗口大小改变时更新iframe的高度。例如，可以获取iframe的contentWindow对象，然后获取其document.body的高度。

window.addEventListener('resize', function() {
    document.getElementById('yourIframeId').style.height = 'auto';
    document.getElementById('yourIframeId').contentDocument.body.scrollHeight; // 获取实际高度
});

3. 使用现代浏览器API：对于支持Intersection Observer API的现代浏览器，可以监控iframe内容是否可见，当内容可见时设置高度。

let observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            document.getElementById('yourIframeId').style.height = 'auto';
        }
    });
}, { rootMargin: '0px', threshold: 1 });

observer.observe(document.getElementById('yourIframeId'));