如何用JavaScript获取整个文档的高度?

有些文件我不能得到文件的高度(位置绝对在最底部)。此外，填充底部似乎在这些页面上不起任何作用，但在高度将返回的页面上起作用。相关案例:

< p > http://fandango.com < br > http://paperbackswap.com < / p > < br > < p >在胡闹 jQuery的$(document).height();返回正确的值
document.height返回0
document.body.scrollHeight返回0

在平装书交换:
jQuery的$(document).height(); TypeError: $(document) is null
document.height返回不正确的值
document.body.scrollHeight返回不正确的值

注意:我有浏览器级别的权限，如果有一些技巧在那里。

611686 次浏览
小开

我不知道如何确定高度，但你可以用这个在底部放一些东西:

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

我撒谎了，jQuery为两个页面返回正确的值$(document).height();…我为什么要怀疑它呢?

小开
最佳答案

文档大小是浏览器兼容性的噩梦，因为尽管所有浏览器都公开了clientHeight和scrollHeight属性，但它们并不都同意如何计算这些值。

关于如何测试正确的高度/宽度，曾经有一个复杂的最佳实践公式。这涉及到文档的使用。documentElement属性(如果可用)或返回到文档属性，等等。

获得正确高度的最简单方法是获取document或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或文件准备好了事件，否则只需在需要该数字时进行测试。

小开

你甚至可以用这个:

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

正确添加引用

在我的情况下，我正在使用一个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>
小开

要以跨浏览器/设备的方式获取宽度，请使用:

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


return actualWidth;
}
小开

确定文档大小的“jQuery方法”——查询所有内容，取最大值，并希望得到最好的结果——在大多数情况下都有效，但不是所有的都是。

如果你真的需要文档大小的防弹结果，我建议你使用我的jQuery.documentSize插件。与其他方法不同的是，它实际上是在加载浏览器时测试和评估浏览器行为，并根据结果查询正确的属性。

这个一次性测试对性能的影响是最小的，插件即使在最奇怪的情况下也能返回正确的结果——不是因为我这么说，而是因为一个大规模的、自动生成的测试套件实际上验证了它是正确的。

因为这个插件是用普通Javascript编写的，所以你也可以使用它没有jQuery。

小开

使用吹码计算高度+滚动

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。

享受吧!

小开

下面的跨浏览器代码计算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 />

小开

这是一个非常老的问题，因此，有许多过时的答案。截至2020年，所有主要的浏览器都遵循了这个标准。

2020年的答案:

document.body.scrollHeight

编辑:上面没有考虑<body>标签的页边距。如果你的身体有边缘，使用:

document.documentElement.scrollHeight
小开

2017年的正确答案是:

document.documentElement.getBoundingClientRect().height

与document.body.scrollHeight不同的是，此方法用于计算正文边距。 它还给出了分数高度值，这在某些情况下是有用的

小开

对于那些在按需滚动页面时遇到困难的人来说，使用功能检测，我想出了这个方法来检测在动画滚动中使用哪个功能。

问题是document.body.scrollTop和document.documentElement在所有浏览器中总是返回true。

但是，实际上您只能使用其中一种滚动文档。根据W3schools(见示例), Safari的d.body.scrollTop和所有其他的document.documentElement

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

提交答案