<iframe> 的高度调整问题：scrollHeight 返回 0答案

【问题标题】：Problem with height adjustment of an <iframe> : scrollHeight returns 0<iframe> 的高度调整问题：scrollHeight 返回 0
【发布时间】：2026-01-22 10:40:01
【问题描述】：

我正在处理邮箱，我从 HTTP 请求中获取邮件并尝试在 iframe 中显示它，因为它可以是纯文本或 HTML 电子邮件。

显示内容没有问题，但我无法调整该内容的高度。我总是从contentWindow.document.body.scrollHeight 得到一个 0。

我试图看看它是否来自邮件可以是纯文本的事实，但对于 html 电子邮件来说也是一样的。

我知道显示内容是因为我手动编辑了页面以更改高度并显示内容。现在唯一的问题是这个高度的自动调整。

顺便说一句，iframe.contentWindow.document.body 是[Object HTMLBodyElement]

$scope.iFrameDisplayMail = function (Mail_content) {

    var iframe = document.getElementById('mail-display');
    if (Mail_content.html != null) {
      iframe.contentWindow.document.write(Mail_content.html);
    } else {
      iframe.contentWindow.document.write(Mail_content.plain);
    }
    iframe.style.width = 'auto';
    alert(iframe.contentWindow.document.body.scrollHeight);
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
    iframe.contentWindow.document.close();  
}

控制台中没有关于此的错误。

【问题讨论】：

标签： javascript html css angularjs iframe

【解决方案1】：

我也遇到了这个问题，在研究如何解决它时发现了这个问题。万一它可能对其他人有帮助，这是我如何让它工作的：

TLDR：尝试将空的<style></style> 标记添加到要在 iFrame 中显示的电子邮件的 HTML 内容（如果没有）。

我使用iFrame.contentWindow.document.write("Html-Content-From-Received-Email" 为 iFrame 设置 HTML 内容）。至于你，会显示这个内容（如果我在故障排除时手动更改了高度），但iFrame.contentWindow.document.body.scrollHeight 返回 0，所以我无法以编程方式正确设置我的高度。

我发现这个问题只发生在没有<style></style> 标签的 HTML 内容上——这在电子邮件中很常见，例如。从雷鸟发送。当我在收到的电子邮件内容中添加一个空的<style></style> 标记（否则完全相同）时，返回了正确的scrollHeight。因此，例如，此电子邮件内容将不起作用 (scrollHeight=0)：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <p>Das ist ein Test.</p>
    <p>Das ist ein Test.</p>
    <p>Das ist ein Test.</p>
  </body>
</html>

但是当我添加<style></style> 标签时，它会正常工作并且会返回正确的scrollHeight：

<html>
  <head>
    <style></style>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <p>Das ist ein Test.</p>
    <p>Das ist ein Test.</p>
    <p>Das ist ein Test.</p>
  </body>
</html>

我不是网络专家，所以我无法解释这究竟为什么有效，但我花了很多时间来解决这个问题，我希望对我有用的解决方案也能帮助其他人。

【讨论】：

我尝试了这个解决方案，但它对我不起作用
对我来说，它继续有效 - @MoSadeghipour，您是要显示 HTML 还是纯文本？您正在使用哪个邮件客户端进行测试？

【解决方案2】：

根据您的示例，您可以使用：

var iframe = document.getElementById('mail-display');
var scrollHeight = iframe.ownerDocument.body.scrollHeight;

【讨论】：

不工作，据说无法获取undefined的参数“document”
我修复了答案以反映问题中的 iframe var。应该是 ownerDocument 而不是“parent”。
这个解决方案对我有用。确切地说，这不是一个修复程序，更像是一种解决方法。 iFrame.contentWindow.document.body.scrollHeight 也为我返回 0，但 ownerDocument 始终具有正确的值。