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

333

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

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

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

При замене в мягкой обложке:
jEQuery's $(document).height();TypeError: $(document)is null
document.heightвозвращает неверное значение
document.body.scrollHeightвозвращает неверное значение

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

javascript

— Nic
источник

5

$ (document) имеет значение null, поскольку на этот сайт не загружен jQuery ...

— Джеймс

Хм, мог бы поклясться, я проверил что-то еще, чтобы подтвердить, что jQuery был зарегистрирован, но это не похоже на то, что я сделал, HA! Я думал, что firebug упакован в jQuery ... хм, наверное, тогда я проверю это, если это решение.

— Nic

4

Firebug не упакован в

— jQUery

См. Поиск размера окна браузера . У этого есть большая таблица поведения различных браузеров.

— Ориоль

671

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

— Боргар
источник

2

Оцените это решение, потому что оно работает, когда вы используете библиотеку прототипов, в jQuery такой проблемы нет

— se_pavel

10

При работе с iframe и jquery из-за этого метода расчета высота документа iframe всегда будет как минимум равна высоте iframe itselft. Это важно отметить, когда вы хотите уменьшить высоту iframe, чтобы соответствовать содержимому. Сначала вы должны сбросить высоту фрейма.

— Дэвид Лэй

3

Мне нужно было увеличить iframe и уменьшить его (приложение facebook), и я обнаружил, что document.body.offsetHeight был для меня лучшим выбором, точно поддерживаемым большинством браузеров.

— JeffG

1

Это замечательно, хотя может дать неправильные результаты, если документ не готов - то есть, когда используется в сгенерированном сервером коде ...

— stuartdotnet

1

Тестирование документа до его готовности не будет работать. Это не имеет ничего общего с сгенерированным кодом / документами, а скорее с тем, как документ загружается. Тест должен быть запущен после того, как документ будет готов, и я рекомендую запускать его только тогда, когда документ полностью загружен, поскольку оставшиеся элементы могут повлиять на высоту, а также изменить размер браузера.

— Боргар

215

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

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

document.body.scrollHeight

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

document.documentElement.scrollHeight

— Marquizzo
источник

хм - сейчас я проверяю это, и оно работает - я не знаю, почему - так хорошо :) - я удаляю свой предыдущий комментарий

— Камиль Килчевски

6

С 2017 года это должно быть помечено как правильный ответ для меня.

— Джоан

@Joan Это до оригинального плаката , чтобы решить :)

— Marquizzo

Не работает при наличии полей. document.documentElement.getBoundingClientRect()работает лучше.

— Торвин

3

В этом есть одна ошибка: скажем, например, что <h1>в начале элемента есть элемент <body>с его полем по умолчанию, он будет толкать <body>элемент вниз без способа его обнаружения. document.documentElement.scrollHeight(не document.body,scrollHeight) является наиболее точным способом ведения дел. Это работает как с полями тела, так и с полями вещей внутри тела, толкая его вниз.

— Итан

29

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

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

— Mimo
источник

24

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

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

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

— Андрей Вербицкий
источник

2

Это работает как шарм! Никакой другой ответ здесь не работает, чтобы получить полную высоту (включая прокручиваемую область), все они возвращают только высоту видимой области.

— Мартин Кристиансон,

Действительно исключительный, никогда не думал об этом. Полагаю, только один работает в фантомах.

— MindlessRanger

6

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

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

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

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

— hashchange
источник

5

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

— Nic
источник

1

Разные браузеры бро.

— Яричи

4

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

document.documentElement.getBoundingClientRect().height

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

— Torvin
источник

1

Вот результаты, которые я получаю, когда попробую ваш метод на этой странице: i.imgur.com/0psVkIk.png Ваш метод возвращает что-то, похожее на высоту окна, и document.body.scrollHeightотображает всю высоту с возможностью прокрутки, как и было в первоначальном вопросе.

— Marquizzo

2

@ Marquizzo это потому, что эта страница html { height: 100% }в css. Таким образом, API правильно возвращает реальную вычисленную высоту. Попробуйте удалить этот стиль, а также добавить поля, bodyи вы увидите, в чем проблема с использованием document.body.scrollHeight.

— Торвин

В этом есть одна ошибка: скажем, например, что <h1>в начале элемента есть элемент <body>с его полем по умолчанию, он будет толкать <body>элемент вниз без способа его обнаружения. document.documentElement.scrollHeight(не document.body,scrollHeight) является наиболее точным способом ведения дел.

— Итан

@ Booligoosh не уверен, что ты имеешь в виду. documentElement.scrollHeightдает неправильное значение в этом случае. documentElement.getBoundingClientRect().heightдает правильный. проверить это: jsfiddle.net/fLpqjsxd

— торвин

1

@torvin Факт остается фактом, что не ожидаемый результат возвращается getBoundingClientRect().height. Это отвлекается, в то время как 3 (три) других метода не отвлекаются. Включая ту, которую вы упоминаете как низшую. И вы настаиваете на этом, предлагая удалить 100% высоты html этой страницы и добавив к ней поля. В чем смысл ? Просто примите это getBoundingClientRect().heightтакже не пуленепробиваемый.

— Роб Ваа

2

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

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

    return actualWidth;
}

— user937284
источник

11

мы говорим о высоте. не ширина.

— Яш

0

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

Вопрос был обоим 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;
    }

— YK
источник

-1

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

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

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

— Али Багери
источник

-1

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

Развернуть фрагмент

— Вилли Вонка
источник

Пожалуйста, объясните мотивацию в случае понижения голоса, чтобы я мог исправить ситуацию. Большое спасибо

— Вилли Вонка

-4

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

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

— jedihawk
источник

1

Поверьте мне, на этом я исчерпал ресурсы HTML и CSS. Не могу объяснить это, но вы увидите проблемы, если попробуете это на этих сайтах.

— Nic

-4

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

В моем случае я использовал страницу 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>

— вздор
источник