在 IE/Firefox/Safari 中计算自动 IFrame 高度-正确的方法是什么？答案

【问题标题】：Calculating automatic IFrame height in IE/Firefox/Safari - what is the correct way?在 IE/Firefox/Safari 中计算自动 IFrame 高度-正确的方法是什么？
【发布时间】：2009-08-30 11:54:50
【问题描述】：

我浏览了许多网站和这里，但找不到最终答案，因为每个网站都有错误。我需要有一个自动 IFrame 高度，这意味着如果内容发生变化，Iframe 必须使其高度适应内容。为此我需要看看如何获得正确的内容高度？

据我了解，最正确的方法是使用： document.getElementById('myIframe').style.pixelHeight = document.getElementById('myIframe').contentWindow.document.body.scrollHeight;

然而，这并不适用于所有浏览器。在 IE 中，我看到高度太小（比应有的高度少了大约 8 个像素）。在 Firefox 中减小内容大小时，scrollHeight 根本没有减小。而在 Safari 中它也不能正常工作。

那么，对于最后的问题，获取内容高度的最正确且经过验证的工作方式是什么 - 应该设置 IFrame 的高度是多少？

谢谢，塔尔。

【问题讨论】：

标签： iframe

【解决方案1】：

IE问题大概是frameborder。当你在 IE 中设置 iframe 高度时，它包含了特殊 iframe 边框的几个像素。 frameborder 不算作普通的 CSS 边框，也不能轻易地从脚本中动态关闭。

你可以在 IE 中添加一些像素来补偿边框，或者写：

<iframe frameborder="0">

关闭边框（如果您确实想要边框周围有一个真正的边框，您可以使用 CSS 放置一个新边框）。

document.body.scrollHeight 在某些情况下可能与文档的高度不匹配：

如果 iframe 中的文档正文有边距（与正文默认情况下一样）。将正文的边距和内边距设置为 0。
如果您在 Quirks 模式下工作，在这种情况下 document.body 表示视口的某些方面，您通常希望仅在 document.documentElement 中看到这些方面。在这种情况下，设置 iframe 的高度直接设置视口高度，然后 document.body 将报告回来。这大概就是 iframe 在 Firefox 中不会缩小的原因。

不要使用 Quirks 模式，您现在应该始终使用标准模式文档类型。如果你必须支持 Quirks 模式下的页面，你可以尝试将整个页面包装在一个 div 中，然后读取它的 offsetHeight。

Safari 问题可能是由于使用了 pixelHeight 造成的，这是一个伪造的 IE 扩展。优先使用：

style.height= number+'px';

这都是一个讨厌的黑客; iframe 专门设计为不响应文档大小。考虑使用页内元素，例如在服务器端模板化的内容，或使用 AJAX 拖入。

【讨论】：

您好，感谢您的回答，它非常有用。我已将代码更改为使用 style.height，删除了填充和边距，现在在 Firefox 中它可以完美运行。 IE问题确实是用frameborder修复的。现在我在文档的开头添加了以下内容： ttp://www.w3.org/TR/html4/strict.dtd" rel="nofollow" target="_blank">w3.org/TR/html4/strict.dtd"> 这意味着它不在怪癖模式下，对吧？在 Safari 中，高度会增加，但在减少内容时不会减少。有什么想法吗？谢谢！塔尔。
document.compatMode 为您提供 Quirks 模式的“BackCompat”或标准的“CSS1Compat”。（父文档可能在标准中，而 iframe 在 Quirks 中，反之亦然。） body.scrollHeight 在 Safari 中似乎是错误的，但我认为 offsetHeight 通常应该有效。
嗨 bobince，谢谢！我真的只为 safari 尝试了 offsetHeight，它确实有效。在我向 iframe 添加大约 8px 之前，它仍然有一些小的滚动条（iframe 没有任何填充或边距），但这要好得多！

【解决方案2】：

$( 文档 ).ready(function() { $( $("#msgContainer")[0].contentWindow ).load(function() {

        var offsetH = "";
        #if(!$request.userAgent.isIE())
            offsetH = $("#msgContainer")[0].contentWindow.document.body.offsetHeight;
        #else
            offsetH = $("#msgContainer")[0].contentWindow.document.body.scrollHeight;
        #end

        var minH = $($("#msgContainer")[0]).css('min-height');
        var height = $($("#msgContainer")[0]).css('height');

        if(offsetH > 250 ){
            $($("#msgContainer")[0]).css('min-height', '250px');
            $($("#msgContainer")[0]).css('height', '250px');
        }else{
            $($("#msgContainer")[0]).css('min-height', offsetH);
            $($("#msgContainer")[0]).css('height', offsetH);
        }
        console.log( offsetH + " : " + minH + " : " + height);
    });
});

【讨论】：