Определить фактический размер веб-страницы в Google Chrome

Question

Мне нужно найти способ получить фактический размер страницы в Google Chrome.В других браузерах это легко сделать с помощью window.scrollMaxY.Chrome не поддерживает это свойство.Все предложенные рабочие места, которые я нашел до сих пор, не работают, как ожидалось.Вот простая тестовая страница (вставьте ее в пустой элемент html / body):

<input type="button" name="size" value="size" onclick="alert(window.scrollMaxY)">
<div id="content" style="width:300px;height:500px;background-color:green"></div>

У нас есть div с высотой 500. В FireFox, независимо от размера окна браузера, кодвозвращает фактическую высоту страницы, то есть 500 + некоторое значение для полей и кнопки.В Chrome нам нужно заменить window.scrollMaxY на что-то.Я пробовал все упомянутое в свойствах Net (document.body, document.documentElement, window.getComputedStyle и другие), но никто не возвращает фактическую высоту документа, , когда окно Chrome больше, чем документ : в этом случае любое свойство, предоставляемое Chrome, возвращает высоту окна, а не высоту страницы.Например, если у нас есть экран с высотой 768 пикселей и развернутым окном Chrome, Chrome сообщит о высоте страницы около 700, а не 500. Поэтому вопрос в том, как получить фактический размер страницы в Chrome.Не стесняйтесь проверять свои предложения с указанной тестовой страницей, заменяя параметр оповещения любыми необходимыми материалами.

Само-ответ:

После более глубокого исследования я обнаружил, что причиной проблемы являетсясама веб-страница, в частности, отсутствующий тег DOCTYPE в начале страницы.Без DOCTYPE Chrome работает в другом режиме и расширяет тело до всего окна (как написал zapthedingbat в своем ответе).Таким образом, правильная разметка веб-страницы может решить проблему, но это возможно только в тех случаях, когда страницы являются нашими собственными страницами.Для веб-страниц других людей из Интернета, которые могут не иметь DOCTYPE, проблема будет сохраняться.Поскольку мне нужно разобраться с внешними веб-страницами, мне нужно как-то решить это, но это другой вопрос.

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

Answer 1

Я предполагаю, что вы используете $(document).ready() в отличие от $(window).load()?

Я бы сначала дал $(window).load(), поскольку он выполняется один раз все завершил загрузку, а не только DOM.

Только что проверил это в Chrome:

$(window).load(function(){
    console.log($('body').height());
});

Возвращено 500.

Answer 2

Вопрос кажется простым, но есть случай, когда все стандартные методы не работают должным образом. Причиной проблемы является веб-страница с отсутствующим тегом DOCTYPE в начале. Без DOCTYPE современные браузеры работают в специальном (причудливом) режиме и расширяют тело до всего окна. Таким образом, правильная разметка веб-страницы может решить проблему, но это не гарантируется для страниц других людей, которые приходят из Интернета (и обрабатываются, например, расширением браузера). Решение состоит в том, чтобы добавить DOCTYPE на лету, как предлагается здесь - jquery-change-doctype . Для документов в режиме BackCompat DOCTYPE добавляется динамически, и только после этого document.documentElement.scrollHeight работает как положено в Chrome.

Answer 3

document.height даст вам высоту документа в хром.Это то, что вы ищете?

---

РЕДАКТИРОВАТЬ

В Chrome тело расширяется, чтобы заполнить область просмотра.Если вы хотите получить высоту содержимого, то либо оберните содержимое тела в один элемент и прочитайте свойство offsetHeight этого элемента упаковки, либо выполните итерацию по каждому дочернему узлу тела и верните максимальные свойства offsetHeight + offsetTop.

Answer 4

попробуйте использовать следующий код;

alert(document.body.offsetHeight);

это очень удобно для кроссбраузера и даст вам фактическую высоту содержимого (не окна просмотра!).

В редких ситуациях это может «потерпеть неудачу», если у вас есть только «положение: абсолютные» элементы внутри тела. Но это было бы ожидаемой ситуацией, потому что элементы «position: absolute» находятся за пределами нормального макета.