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

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

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

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

В обмен мягкой обложке:
jQuery $(document).height(); ТипError: $(document) - null document.height возвращает неверное значение
document.body.scrollHeight возвращает неверное значение

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

ОТВЕТЫ

Ответ 1

Размеры документов - это кошмар совместимости с браузером, потому что, хотя все браузеры выставляют свойства 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 или документ готов, если вам это нужно во время загрузки, иначе просто проверьте, когда вам нужен номер.

Ответ 2

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

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

document.body.scrollHeight

Ответ 3

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

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())

Ответ 4

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

;(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/), вставив этот script в консоль DevTools.

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

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

Ответ 5

"Метод jQuery" для определения размера документа - запрашивает все, берет наивысшую ценность и надеется на лучшее - работает в большинстве случаев, но not во всех из них.

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

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

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

Ответ 6

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

Ответ 7

Добавить ссылки правильно

В моем случае я использовал страницу ASCX, а страница aspx, содержащая элемент управления ascx, неправильно использует ссылки. Я просто вставил следующий код, и он работал:

<script src="../js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/jquery-1.5.1.js" type="text/javascript"></script>

Ответ 8

Получите ширину в режиме перекрестного браузера/устройства:

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

    return actualWidth;
}

Ответ 9

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

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

var height = dif + document.documentElement.scrollHeight +"px";

Ответ 10

Я не знаю об определении высоты только сейчас, но вы можете использовать это, чтобы поместить что-то внизу:

<html>
<head>
<title>CSS bottom test</title>
<style>
.bottom {
  position: absolute;
  bottom: 1em;
  left: 1em;
}
</style>
</head>

<body>

<p>regular body stuff.</p>

<div class='bottom'>on the bottom</div>

</body>
</html>

Ответ 11

Этот кросс-браузерный код ниже оценивает все возможные высоты тела и элементов 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 />

Ответ 12

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

document.documentElement.getBoundingClientRect().height

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