Question

<iframe name="asdf" id="asdf" onload="change_height(this)" src="asdf.jsp" width="250" scrolling="no" frameborder="0"></iframe>

        function change_height(iframe) {
            if (document.all) {
                // IE.
                ieheight = iframe.document.body.scrollHeight;
                iframe.style.height = ieheight;
            } else {
                // Firefox.
                ffheight= iframe.contentDocument.body.offsetHeight;
                iframe.style.height = ffheight+ 'px';

            }
        }

在IE7中运行时，高度是实际高度的两倍;尚未在IE6上测试过。如果我使用 scrollHeight 或 offsetHeight ，它的值相同。

这是Firefox中的正确高度。

在我通过划分IE值/ 2来修补此问题之前，有什么方法可以做到这一点？

Answer 1

当IE在Quirks模式下运行时，

document.body表示视口。如果iframe中的文档位于Quirks中，scrollHeight的{{1}}将等于其视口的高度，即。 iframe的默认高度。

如果你真的需要在Quirks模式下获得文档高度，你必须添加一个额外的包装div来测量。更好的解决方法是确保所有文档都使用标准模式doctype。在这十年中，你不应该用Quirks Mode创作任何东西。

此外，你不应该使用body进行IE嗅探（对于支持它的其他浏览器可能会出错），你不应该使用document.all（它是非标准的，甚至没有记录通过MSDN），你应该总是添加iframe.document个单位（IE可以很好地处理它，你需要它在标准模式下）。

'px'

Answer 2

尝试使用此

function change_height(iframe) {
    var doc= 'contentDocument' in iframe? iframe.contentDocument : iframe.contentWindow.document;
    iframe.style.height= doc.body.scrollHeight+'px';
}

我也修改了jquery使用的代码

(function($) {
    $.fn.ZIAutoHeight = function() {
        var t = this, doc = 'contentDocument' in t[0]? t[0].contentDocument : t[0].contentWindow.document;
        t.css('height', doc.body.scrollHeight+'px');
    }
})(jQuery);

用法$('iframe').ZIAutoHeight();希望得到帮助

iframe.document.body.scrollHeight是正确值的两倍

2 个答案: