iframe引入页面如何让iframe自动撑开

### 实现 iframe 自动调整高度

为了使 `iframe` 根据加载的内容自动调整高度，可以通过设置默认的 CSS 属性并利用 JavaScript 动态更新高度。具体做法如下：

#### 设置最小高度和自适应脚本

在样式表中定义一个最低的高度值以防止初始状态下出现空白区域[^1]。

/* 定义 iframe 的基本样式 */
#external-frame {
    min-height: 300px;
}

接着，在页面加载完成后执行一段 JavaScript 来检测 `iframe` 内部文档的实际滚动高度，并据此修改 `iframe` 的高度属性。

function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;

        // 获取内部文档主体的高度
        if (iframeWin.document.body) {
            iframe.height = Math.max(
                iframeWin.document.documentElement.scrollHeight,
                iframeWin.document.body.scrollHeight
            ) + 'px';
        }
    }
}

// 当整个窗口完成加载时触发此事件处理程序
window.onload = function() {
    setIframeHeight(document.getElementById('external-frame'));
};

这段代码确保了即使当 `iframe` 加载的是跨域资源时也能正常工作，因为只读取了 `scrollHeight` 这一安全属性而不涉及其他可能引发同源策略错误的操作。

对于动态创建的 `iframe` 或者需要更复杂的交互逻辑的情况，则需要注意路径配置以及潜在的安全性和兼容性问题[^2]。