сложность высоты документа javascript

Question

Разработчики Mozilla & IE, похоже, одновременно изменили реализацию своих элементов высоты, чтобы представить реализацию Opera ... о которой мне раньше не приходилось беспокоиться.

var height = (document.height !== undefined) ? document.height : document.body.offsetHeight;

При выполнении на пустом документе теперь возвращает 0 как высоту документа. Моя реализация требует знания истинного клиентского видового экрана для динамического построения. Chrome и Safari по-прежнему работают так, как раньше.

scrollHeight и clientHeight действуют точно так же.

Чтобы усложнить ситуацию, document.height и document.body.offsetHeight теперь также учитывают полную высоту документа, а не только видимую область, как это было раньше ... Я попробовал старый метод разделения таблицы и использовал 2000px x 1px прозрачный, а высота документа теперь установлена ​​на 2000 ... естественно, Chrome и Safari по-прежнему работают должным образом и дают только видимый размер.

Я очень хочу решить эту проблему.

Answer 1

Высота области просмотра - это не свойство документа, а окно, в котором он просматривается. Вы получаете высоту области просмотра от window.innerHeight.

Материал с document необходим только как запасной вариант для IE, который не обеспечивает размеры window.inner. IE (технически неверно) заставляет document.documentElement представлять область просмотра, поэтому вы можете получить высоту из его clientHeight, если только вы не находитесь в режиме Quirks, который (более неправильно) заставляет document.body представлять область просмотра. (document.height совершенно нестандартно; избегайте его.)

Итак, подытожив, что вам нужно поддерживать режим Quirks (будем надеяться, что вы этого не сделаете):

var height= (
    'innerHeight' in window? window.innerHeight :
    document.compatMode!=='BackCompat'? document.documentElement.clientHeight :
    document.body.clientHeight
);

Answer 2

Я использую это, что я получил с сайта Джеймса Палдоси :

function getDocHeight() {
    //utility function to find dimensions of page
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}