Как получить высоту всего документа с помощью JavaScript? - PullRequest
Новая
       29

Как получить высоту всего документа с помощью JavaScript?

295 голосов
/ 18 июля 2009

Некоторые документы я не могу получить высоту документа (чтобы разместить что-то абсолютно в самом низу). Кроме того, нижний отступ, кажется, ничего не делает на этих страницах, но делает на тех страницах, где вернется высота. Случай (ы) в точке:

http://fandango.com
http://paperbackswap.com

На Фанданго
$(document).height(); в jQuery возвращает правильное значение
document.height возвращает 0
document.body.scrollHeight возвращает 0

При обмене мягкими обложками:
$(document).height(); TypeError: $(document) равно нулю
в jQuery document.height возвращает неверное значение
document.body.scrollHeight возвращает неверное значение

Примечание: у меня есть разрешения на уровне браузера, если там есть какая-то хитрость.

Ответы [ 12 ]

597 голосов
/ 18 июля 2009

Размеры документов - это кошмар совместимости браузера, потому что, хотя все браузеры предоставляют свойства clientHeight и scrollHeight, они не все согласны с тем, как рассчитываются значения.

Раньше существовала сложная формула наилучшей практики для того, как вы тестировали правильную высоту / ширину. Это включало использование свойств document.documentElement, если они доступны, или использование свойств документа и т. Д.

Самый простой способ получить правильную высоту - это получить все значения высоты, найденные в документе или documentElement, и использовать самое высокое значение. Это в основном то, что делает jQuery: 

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

Быстрый тест с Firebug + jQuery bookmarklet возвращает правильную высоту для обеих цитируемых страниц, как и пример кода.

Обратите внимание, что проверка высоты документа до того, как документ будет готов, всегда приводит к 0. Кроме того, если вы загружаете больше материала или пользователь изменяет размер окна, вам может потребоваться повторное тестирование. Используйте onload или готовый документ событие, если вам это нужно во время загрузки, в противном случае просто проверяйте всякий раз, когда вам нужно число.

146 голосов
/ 19 мая 2017

Это действительно старый вопрос, и поэтому у него много устаревших ответов. Начиная с 2017 года все браузеры придерживались стандарта.

Ответ на 2017 год: 

document.body.scrollHeight

Редактировать: вышеуказанное не учитывает поля тега <body>. Если у вашего тела есть поля, используйте: 

document.documentElement.scrollHeight
28 голосов
/ 07 февраля 2013

Вы даже можете использовать это: 

var B = document.body,
    H = document.documentElement,
    height

if (typeof document.height !== 'undefined') {
    height = document.height // For webkit browsers
} else {
    height = Math.max( B.scrollHeight, B.offsetHeight,H.clientHeight, H.scrollHeight, H.offsetHeight );
}

или более jQuery (поскольку, как вы сказали, jQuery не врет): 

Math.max($(document).height(), $(window).height())
22 голосов
/ 16 декабря 2016

Полный расчет высоты документа:

Чтобы быть более общим и найти высоту любого документа , вы можете просто найти самый высокий узел DOM на текущей странице с простой рекурсией: 

;(function() {
    var pageHeight = 0;

    function findHighestNode(nodesList) {
        for (var i = nodesList.length - 1; i >= 0; i--) {
            if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
                var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
                pageHeight = Math.max(elHeight, pageHeight);
            }
            if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
        }
    }

    findHighestNode(document.documentElement.childNodes);

    // The entire page height is found
    console.log('Page height is', pageHeight);
})();

Вы можете проверить его на своих образцах сайтов (http://fandango.com/ или http://paperbackswap.com/), вставив этот скрипт в консоль DevTools.

ПРИМЕЧАНИЕ: он работает с Iframes.

Наслаждайтесь!

6 голосов
/ 05 марта 2015

«Метод jQuery» для определения размера документа - запрашивать все, принимать наибольшее значение и надеяться на лучшее - работает в большинстве случаев, но не во всех из них .

Если вам действительно нужны пуленепробиваемые результаты для размера документа, я бы предложил вам использовать мой плагин jQuery.documentSize . В отличие от других методов, он на самом деле тестирует и оценивает поведение браузера при загрузке и на основании результата запрашивает правильное свойство оттуда.

Влияние этого одноразового теста на производительность минимально , и плагин возвращает правильные результаты даже в самых странных сценариях - не потому, что я так говорю, а потому, что массивный автоматически генерируемый тест Пакет фактически проверяет, что он делает.

Поскольку плагин написан на ванильном Javascript, вы можете использовать его без jQuery .

5 голосов
/ 18 июля 2009

Я соврал, jQuery возвращает правильное значение для обеих страниц $ (document) .height (); ... почему я в этом сомневался?

2 голосов
/ 18 ноября 2017

Правильный ответ на 2017 год:

document.documentElement.getBoundingClientRect().height

В отличие от document.body.scrollHeight этот метод учитывает поля тела. Это также дает дробное значение высоты, которое может быть полезно в некоторых случаях

1 голос
/ 05 марта 2015

Чтобы получить ширину в кросс-браузере / устройстве, используйте: 

function getActualWidth() {
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}
0 голосов
/ 06 февраля 2017

Этот кросс-браузерный код ниже оценивает все возможные высоты элементов body и html и возвращает найденный максимум: 

            var body = document.body;
            var html = document.documentElement;
            var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight); // The max height of the body

Рабочий пример: 

function getHeight()
{
  var body = document.body;
  var html = document.documentElement; 
  var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight);
  return bodyH;
}

document.getElementById('height').innerText = getHeight();
body,html
{
  height: 3000px;
}

#posbtm
{
  bottom: 0;
  position: fixed;
  background-color: Yellow;
}
<div id="posbtm">The max Height of this document is: <span id="height"></span> px</div>

example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
0 голосов
/ 30 мая 2015

используйте код удара для высоты вычислений + прокрутка 

var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var height = dif + document.documentElement.scrollHeight +"px";
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...