iframe.document.body.scrollHeight удваивает правильное значение

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';

            }
        }

ieheight в два раза больше фактической высоты, когда это выполняется в IE7; не тестировал на IE6. Это то же значение, если я использую scrollHeight или offsetHeight .

Это правильная высота в Firefox.

Прежде чем я исправлю это, просто разделив значение IE / 2, как правильно это сделать?

Answer 1

document.body представляет область просмотра, когда IE работает в режиме Quirks. Если документ внутри вашего iframe находится в Quirks, scrollHeight из body будет равен высоте его области просмотра, т.е. высота по умолчанию для фрейма.

Если вам действительно нужно получить высоту документа в режиме «Причуды», вам нужно добавить дополнительный div-обертку для измерения. Гораздо лучше исправить то, что все ваши документы используют тип документа в режиме стандартов. В этом десятилетии вы не должны создавать что-либо с Quirks Mode.

Кроме того, вы не должны использовать document.all для сниффинга IE (это может пойти не так для других браузеров, которые его поддерживают), вы не должны использовать iframe.document (это нестандартно и даже не задокументировано MSDN), и вы всегда должны добавлять 'px' единиц (IE прекрасно справляется с этим, и вам это нужно в режиме Standards).

function change_height(iframe) {
    var doc= 'contentDocument' in iframe? iframe.contentDocument : iframe.contentWindow.document;
    iframe.style.height= doc.body.offsetHeight+'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(); надеюсь, что это поможет