Question

我正在尝试使用JavaScript和jQuery获取页面的总高度，以便我可以检查页面是否足够长以显示某些内容，但是在我的测试中，我无法获得页面的总高度。 / p>

我在互联网上环顾四周，但是这样的事情似乎没有得到很好的记录，因为我能找到的是scrollHeight，正如我可能提到的那样，它不起作用。

任何使用jQuery查找它的方法？

Answer 1

没有框架：

var _docHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight;
var _docWidth = (document.width !== undefined) ? document.width : document.body.offsetWidth;

Answer 2

您是否尝试过$(document).height();？

演示here

Answer 3

document.documentElement.scrollHeight在最新版本的Internet Explorer，Chrome，Firefox和Safari中正常运行。

Answer 4

整页的高度......

document.body.offsetHeight

视口高度......

var h;

if(self.innerHeight)
  h = window.innerHeight
else if(document.documentElement && document.documentElement.clientHeight)
  h = document.documentElement.clientHeight;
else if(document.body)
  h= document.body.clientHeight;

This article可能对您有帮助。

Answer 5

也许使用页面底部元素的位置，如：

$("#footer").offset().top

Answer 6

要查找整个文档的高度，您只需通过简单的递归找到当前页面上最高的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);
})();

注意：它正在使用Iframes。

享受！

Answer 7

查看documentation。支持的方法之一：height，innerHeight，outerHeight可能适合您。

页面总高度

7 个答案: