iframe高度自动撑开

如果你想要让 iframe 的高度自动撑开以适应内容的高度，可以使用以下的方法：

1. 使用 JavaScript 自动计算高度

可以通过 JavaScript 获取 iframe 内容的高度，然后设置 iframe 的高度。具体代码如下：

var iframe = document.getElementById('myiframe');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
iframe.style.height = innerDoc.body.scrollHeight + 'px';

这段代码会获取 id 为 myiframe 的 iframe 元素，然后获取它内部文档的高度，最后将 iframe 的高度设置为文档高度。

2. 使用 CSS 的 height: auto 属性

在 CSS 中，可以将 iframe 的高度设置为 auto，这样 iframe 将会自动根据内部内容的高度进行撑开。具体代码如下：

iframe {
  height: auto;
}

这种方法比较简单，但是需要注意的是，某些浏览器可能不支持该属性。

相关问题

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 中内容的高度。