Як отримати висоту всього документа за допомогою JavaScript?

333

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

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

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

При обміні обкладинки:
jQuery's $(document).height();TypeError: $(document)is null
document.heightповертає неправильне значення,
document.body.scrollHeightповертає неправильне значення

Примітка. У мене є дозволи на рівні браузера, якщо там є якась хитрість.

javascript

— Nic
джерело

5

$ (документ) недійсний, тому що на цьому веб-сайті не завантажено jQuery ...

— James

Гм, міг присягнути, що я перевірив щось інше, щоб підтвердити, що jQuery був зареєстрований, але це виглядає не так, як я, HA! Я подумав, що у Firebug упаковано jQuery ... хм, я думаю, я перевірю це, тоді це рішення.

— Nic

4

У Firebug немає упакованого

— jQUery

Див. Розділ Пошук розміру вікна браузера . У ньому чудова таблиця поведінки різних браузерів.

— Оріол

670

Розміри документів - це кошмар сумісності браузера, оскільки, хоча всі браузери виявляють властивості 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

оцініть це рішення, оскільки воно працює, коли ви використовуєте бібліотеку прототипів, у jQuery такої проблеми немає

— se_pavel,

10

Під час роботи з iframe та jquery, завдяки цьому методу обчислення, висота документа iframe завжди буде принаймні висотою iframe itselft. Це важливо зазначити, коли ви хочете зменшити висоту рамки кадрів, щоб відповідати вмісту. Спочатку потрібно скинути висоту рамки.

— Девід Лежав

3

У мене виникла потреба виростити iframe і зменшити його (додаток facebook) і я виявив, що document.body.offsetHeight був найкращим вибором для мене, точно підтримуваний більшістю браузерів.

— JeffG

1

Це чудово, хоча може дати неправильні результати, якщо документ не готовий - тобто при використанні в коді, створеному сервером ...

— stuartdotnet

1

Тестування документа перед його готовністю не працюватиме. Це не має нічого спільного з генерованим кодом / документами, а як із завантаженням документа. Тест повинен запускатися після того, як документ буде готовий, і я б запропонував запустити його лише тоді, коли документ буде повністю завантажений, оскільки решта елементів може вплинути на висоту, а також зміни розміру браузера.

— Боргар

214

Це справді старе питання, і, таким чином, є багато застарілих відповідей. Станом на 2020 рік усі основні браузери дотримуються стандарту .

Відповідь на 2020 рік:

document.body.scrollHeight

Редагувати: вищезгадане не враховує поля на <body>тегу. Якщо ваше тіло має запаси, використовуйте:

document.documentElement.scrollHeight

— Маркіццо
джерело

хм - зараз я тестую це, і він працює - я не знаю, чому - так добре :) - я

— видаляю

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

— Мімо
джерело

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 .

— хеш-обмін
джерело

5

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

— Nic
джерело

1

Різні браузери бро.

— jahrichie

4

Правильна відповідь на 2017 рік:

document.documentElement.getBoundingClientRect().height

На відміну від document.body.scrollHeightцього методу припадає межа тіла. Він також дає значення дробової висоти, що може бути корисним у деяких випадках

— торвін
джерело

1

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

— Маркіццо

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

— torvin

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

— користувач937284
джерело

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

Цей перехресний код браузера нижче оцінює всі можливі висоти елементів тіла та 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 />

Розгорніть фрагмент

— willy winka
джерело

Будь ласка, поясніть мотивацію у випадку відхилення, щоб я міг виправити точку. Велике спасибі

— willy wonka

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

— Тош
джерело