Как получить высоту всего документа с помощью JavaScript?
Некоторые документы я не могу получить высоту документа (чтобы разместить что-то абсолютно в самом низу). Кроме того, нижний отступ, по-видимому, ничего не делает на этих страницах, но делает на тех страницах, где будет возвращаться высота. Случай (ы) в точку:
http://fandango.com/
http://paperbackswap.com/
На фанданго
JQuery-х $(document).height(); возвращает правильное значениеdocument.height возвращает 0document.body.scrollHeight возвращает 0
В обмен на мягкую обложку:
JQuery-х $(document).height(); TypeError: $(document) нулевойdocument.height возвращает неверное значениеdocument.body.scrollHeight возвращает неверное значение
Примечание: у меня есть разрешения на уровне браузера, если есть какая-то хитрость там.
12 ответов
Размеры документов - кошмар совместимости браузера, потому что, хотя все браузеры предоставляют свойства 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 возвращает правильную высоту для обеих цитируемых страниц, как и пример кода.
Обратите внимание, что проверка высоты документа до того, как документ будет готов, всегда будет иметь значение 0. Кроме того, если вы загружаете больше материала или пользователь изменяет размер окна, вам может потребоваться повторное тестирование. использование onload или событие готовности документа, если вам это нужно во время загрузки, в противном случае просто проверяйте всякий раз, когда вам нужен номер.
Это действительно старый вопрос, и поэтому у него много устаревших ответов. По состоянию на 2017 год все браузеры придерживались стандарта.
Ответ на 2017 год:
document.body.scrollHeight
Изменить: выше не берет наценки на <body> Отметить в аккаунте. Если у вашего тела есть поля, используйте:
document.documentElement.scrollHeight
Полный расчет высоты документа:
Чтобы быть более общим и найти высоту любого документа, вы можете просто найти самый высокий узел 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,
Наслаждайтесь!
Вы даже можете использовать это:
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())
Правильный ответ на 2017 год:
document.documentElement.getBoundingClientRect().height
В отличие от document.body.scrollHeight этот метод учитывает поля тела. Это также дает дробное значение высоты, которое может быть полезно в некоторых случаях.
"Метод jQuery", позволяющий определить размер документа - запросить все, получить наибольшее значение и надеяться на лучшее - работает в большинстве случаев, но не во всех.
Если вам действительно нужны пуленепробиваемые результаты для размера документа, я бы посоветовал вам использовать мой плагин jQuery.documentSize. В отличие от других методов, он на самом деле тестирует и оценивает поведение браузера при загрузке и на основании результата запрашивает правильное свойство оттуда.
Влияние этого одноразового теста на производительность минимально, и плагин возвращает правильные результаты даже в самых странных сценариях - не потому, что я так говорю, а потому, что массивный, автоматически сгенерированный набор тестов фактически проверяет, что это так.
Поскольку плагин написан на ванильном Javascript, вы можете использовать его и без jQuery.
Я соврал, jQuery возвращает правильное значение для обеих страниц $(document).height();... почему я когда-либо сомневался в этом?
Получите ширину в кросс-браузер / устройство способ использования:
function getActualWidth() {
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidh;
return actualWidth;
}
Этот кросс-браузерный код ниже оценивает все возможные высоты элементов 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 />Для тех, у кого есть проблемы с прокруткой страницы по запросу, используя обнаружение функций, я придумал этот прием, чтобы определить, какую функцию использовать в анимированной прокрутке.
Проблема была как document.body.scrollTop а также document.documentElement всегда возвращался true во всех браузерах.
Однако вы можете прокрутить документ только с помощью одного или другого. d.body.scrollTop для Safari и document.documentElementдля всех остальных согласно w3schools (см. примеры)
element.scrollTop работает во всех браузерах, но не на уровне документа.
// get and test orig scroll pos in Saf and similar
var ORG = d.body.scrollTop;
// increment by 1 pixel
d.body.scrollTop += 1;
// get new scroll pos in Saf and similar
var NEW = d.body.scrollTop;
if(ORG == NEW){
// no change, try scroll up instead
ORG = d.body.scrollTop;
d.body.scrollTop -= 1;
NEW = d.body.scrollTop;
if(ORG == NEW){
// still no change, use document.documentElement
cont = dd;
} else {
// we measured movement, use document.body
cont = d.body;
}
} else {
// we measured movement, use document.body
cont = d.body;
}
Используйте код удара для вычисления высоты + прокрутки
var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var height = dif + document.documentElement.scrollHeight +"px";
Добавьте ссылки правильно
В моем случае я использовал страницу 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>
Я не знаю об определении высоты сейчас, но вы можете использовать это, чтобы положить что-то на дно:
<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>