iframe高度自动撑开

要实现 iframe 高度自动撑开的效果，可以使用以下两种方法：

1. 使用 JavaScript

首先，需要在 iframe 标签中添加 onload 属性，用于在 iframe 加载完成后触发指定的 JavaScript 函数。在 JavaScript 函数中，获取 iframe 的内容高度，然后将 iframe 的高度设置为内容高度即可。

示例代码如下：

<iframe src="example.html" onload="resizeIframe(this)"></iframe>

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

2. 使用 CSS

另一种方法是使用 CSS 中的 `height: 100%`，让 iframe 的高度自动适应其父元素的高度。同时，需要设置 iframe 的父元素的高度为 `auto`，以便自动适应 iframe 的高度。

示例代码如下：

<div style="height: auto;">
  <iframe src="example.html" style="height: 100%;"></iframe>
</div>

需要注意的是，使用 CSS 方法时，需要保证 iframe 的父元素能够自动适应其内容高度，否则 iframe 的高度仍然无法自动撑开。

相关问题

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]。

如何 使 iframe 撑开页面

要使 iframe 撑开页面，可以通过以下方法：

1. 设置 iframe 的宽度和高度为 100%，这样它就会自动适应父容器的大小。

2. 在父容器中设置 overflow: hidden，这样 iframe 的内容超出父容器的部分就会被隐藏，而不会撑开页面。

3. 如果 iframe 中的内容高度不确定，可以使用 JavaScript 动态调整 iframe 的高度，使其与内容高度相等。可以使用以下代码：

var iframe = document.getElementById('myIframe');
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';

其中，myIframe 是 iframe 的 id，contentWindow.document.body.scrollHeight 是 iframe 中内容的高度。