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

2020/10/02 07:41 · javascript ·  · 0评论

有些文档我无法获得文档的高度(将某些内容绝对定位在最底部)。此外,在这些页面上的底部填充似乎没有任何作用,但在高度会返回的页面上却没有作用。案例:

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

在Fandango上,

jQuery的
$(document).height();返回正确值
document.height返回0
document.body.scrollHeight返回0

关于平装书交换:

jQuery的
$(document).height();TypeError:$(document)为null
document.height返回不正确的值
document.body.scrollHeight返回不正确的值

注意:如果有一些技巧,我具有浏览器级别的权限。

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

关于如何测试正确的高度/宽度,曾经有一个复杂的最佳实践公式。这涉及使用document.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文档就绪事件,否则,只要需要此编号,就进行测试。

这是一个非常老的问题,因此有许多过时的答案。截至2020年,所有主要浏览器均已遵守该标准

2020年答案:

document.body.scrollHeight

编辑:上面没有考虑<body>标签上的边距如果您的身体有边缘,请使用:

document.documentElement.scrollHeight

您甚至可以使用:

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

完整文档高度计算:

为了更通用并找到任何文档的高度,您可以通过简单的递归在当前页面上找到最高的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 Console中。

注意:它正在使用Iframes

请享用!

确定文档大小的“ jQuery方法”(在所有情况下查询所有内容,采用最高价值并希望获得最佳效果)在大多数情况下都适用,但并非在所有情况下都适用

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

一次性测试对性能的影响很小,即使在最奇怪的情况下,该插件也能返回正确的结果-不是因为我这么说,而是因为一个庞大的自动生成的测试套件实际上可以验证它的有效性。

由于该插件是用原始Javascript编写的,因此您也可以在使用jQuery的情况下使用它

我撒谎了,jQuery为两个页面都返回了正确的值$(document).height(); ...为什么我曾经对此表示怀疑?

2017年的正确答案是:

document.documentElement.getBoundingClientRect().height

document.body.scrollHeight这种方法不同,它占了身体的边缘。它还提供了分数高度值,在某些情况下可能有用

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

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

    return actualWidth;
}

对于使用功能检测无法按需滚动页面的任何人,我提供了此技巧来检测动画滚动中要使用的功能。

这个问题既存在document.body.scrollTopdocument.documentElementtrue在所有浏览器中始终返回

但是,您实际上只能使用一个或另一个来滚动文档。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;
    }

使用打击代码计算高度+滚动

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

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

下面的此跨浏览器代码评估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 />

我现在不知道确定高度,但是您可以使用它在底部放置一些东西:

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

正确添加参考

就我而言,我使用的是ASCX页面,而包含ascx控件的aspx页面未正确使用引用。我只是粘贴了以下代码,它的工作原理是:

<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>
本文地址:http://javascript.askforanswer.com/ruheshiyongjavascripthuoquzhenggewendangdegaodu.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!