Вычисление автоматической высоты IFrame в IE / Firefox / Safari - как правильно?

Question

Я просмотрел много веб-сайтов и здесь, и не смог найти окончательный ответ, так как у каждого есть свои ошибки. Мне нужна автоматическая высота IFrame, то есть, если содержимое меняется, Iframe должен адаптировать его высоту к содержанию. Для этого мне нужно посмотреть, как получить правильную высоту содержимого?

Как я понимаю, самый правильный способ - это использовать: document.getElementById ('myIframe'). style.pixelHeight = document.getElementById ('myIframe'). contentWindow.document.body.scrollHeight;

Однако это работает некорректно во всех браузерах. в IE я вижу, что высота слишком мала (примерно на 8 пикселей меньше, чем должна). в Firefox при уменьшении размера контента scrollHeight вообще не уменьшается. и в Safari это тоже не работает.

Итак, для заключительных вопросов, каков наиболее правильный и проверенный способ получения высоты содержимого - какую высоту следует установить IFrame?

Спасибо, Tal.

Answer 1

$ (документ) .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);
    });
});

Answer 2

Проблема IE, вероятно, frameborder . Когда вы устанавливаете высоту iframe в IE, она включает несколько пикселей специальной рамки iframe. Рамка рамки не считается нормальной границей CSS и не может быть легко отключена динамически из скрипта.

Вы можете добавить несколько пикселей в IE, чтобы компенсировать рамку, или написать:

<iframe frameborder="0">

чтобы отключить границу (если вы хотите создать реальную рамку вокруг рамки, вы можете добавить новую в CSS).

document.body.scrollHeight может не соответствовать высоте документа в некоторых случаях:

1. Если тело документа в iframe имеет поле (как тело по умолчанию). Установите для поля и отступа значение 0.

2. Если вы работаете в режиме Quirks, в этом случае document.body представляет некоторые аспекты области просмотра, которые вы обычно ожидаете увидеть только в document.documentElement. В этом случае установка высоты iframe напрямую устанавливает высоту области просмотра, о которой document.body затем сообщит. Вероятно, именно поэтому iframe не будет уменьшаться в Firefox.

Не используйте Quirks Mode, вы всегда должны использовать Doctype в Standards Mode сегодня. Если вы должны поддерживать страницы в режиме Quirks, вы можете попробовать обернуть всю страницу в div и прочитать значение offsetHeight этого.

Проблема Safari может быть вызвана использованием pixelHeight, который является поддельным расширением IE. В преферансе использовать:

style.height= number+'px';

Это все мерзкий взлом; iframes специально разработаны, чтобы не отвечать на размер документа. Подумайте об использовании элементов на странице, таких как контент, настроенный на стороне сервера, или вместо этого перетаскивайте с помощью AJAX.