Найти высоту документа с помощью javascript [duplicate]
Самое простое решение - создать функцию JavaScript и вызвать его для обратного вызова Ajax success.
function callServerAsync(){
$.ajax({
url: '...',
success: function(response) {
successCallback(response);
}
});
}
function successCallback(responseObj){
// Do something like read the response and show data
alert(JSON.stringify(responseObj)); // Only applicable to JSON response
}
function foo(callback) {
$.ajax({
url: '...',
success: function(response) {
return callback(null, response);
}
});
}
var result = foo(function(err, result){
if (!err)
console.log(result);
});
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 bookmarklet возвращает правильную высоту для обеих цитируемых страниц, а также пример кода.
Обратите внимание, что тестирование высоты документа до готовности документа всегда приведет к 0. Кроме того, если вы загрузите больше вещей или измените размер окна, вам может потребоваться повторная проверка. Используйте onload или document ready , если вам это нужно во время загрузки, в противном случае просто проверьте, когда вам нужен номер.
-
1– se_pavel 29 September 2009 в 19:28
-
2– David Lay 30 November 2009 в 14:35
-
3– JeffG 3 August 2012 в 02:04
-
4– stuartdotnet 2 October 2012 в 04:51
-
5– Borgar 5 December 2012 в 15:02
использовать код удара для высоты вычисления + прокрутка
var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var height = dif + document.documentElement.scrollHeight +"px";
Полный расчет высоты документа:
Чтобы быть более общим и найти высоту любого документа, вы могли бы просто найти самый высокий узел 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.
Наслаждайтесь!
-
1– Martin Kristiansson 27 April 2017 в 13:14
-
2– mickleroy 9 May 2017 в 06:25
-
3– MindlessRanger 25 May 2018 в 18:21
«Метод jQuery» для определения размера документа - запрашивает все, берет наивысшее значение и надеется на лучшее - работает в большинстве случаев, но не во всех из них .
Если вам действительно нужны пуленепробиваемые результаты для размера документа, я бы предложил использовать мой плагин jQuery.documentSize . В отличие от других методов, он фактически проверяет и оценивает поведение браузера при его загрузке и, основываясь на результатах, запрашивает правильное свойство оттуда.
Влияние этого одноразового теста на производительность минимально , и плагин возвращает правильные результаты даже в самых странных сценариях - не потому, что я так говорю, а потому, что массивный , автоматически созданный тестовый набор фактически проверяет, что он делает.
Поскольку плагин написан в ванильном Javascript, вы можете использовать его без jQuery тоже.
Добавить ссылки правильно
В моем случае я использовал страницу 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>
-
1– Nic 17 July 2009 в 23:09
Вы даже можете использовать это:
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 года, все браузеры придерживались стандарта.
Отвечать за 2017:
document.body.scrollHeight
Изменить: выше не учитываются поля в теге <body>. Если у вашего тела есть поля, используйте:
document.documentElement.scrollHeight
-
1– Kamil Kiełczewski 28 June 2017 в 16:26
-
2– Joan 7 July 2017 в 09:43
-
3– Marquizzo 7 July 2017 в 18:06
-
4– torvin 18 November 2017 в 05:20
-
5– Ethan 13 February 2018 в 09:25
Я соврал, jQuery возвращает правильное значение для обеих страниц $ (document) .height (); ... почему я когда-либо сомневался в этом?
-
1– jahrichie 25 February 2015 в 03:37
Правильный ответ на 2017 год:
document.documentElement.getBoundingClientRect().height
В отличие от document.body.scrollHeight этот метод учитывает поля тела. Он также дает дробное значение высоты, которое может быть полезно в некоторых случаях
-
1– torvin 21 November 2017 в 22:41
-
2– Marquizzo 22 November 2017 в 23:05
-
3– torvin 23 November 2017 в 00:31
-
4– Ethan 13 February 2018 в 09:23
-
5– torvin 13 February 2018 в 23:57
Получить ширину в режиме перекрестного браузера / устройства:
function getActualWidth() {
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidh;
return actualWidth;
}
-
1– Yash 15 October 2015 в 20:28
Этот кросс-браузерный код ниже оценивает все возможные высоты тела и элементов 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 />-
1– willy wonka 14 March 2017 в 15:30