页面总高度

时间:2009-07-06 16:26:38

标签: javascript jquery

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

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

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

7 个答案:

答案 0 :(得分:39)

没有框架:

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

答案 1 :(得分:10)

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

演示here

答案 2 :(得分:10)

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

答案 3 :(得分:2)

整页的高度......

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可能对您有帮助。

答案 4 :(得分:1)

也许使用页面底部元素的位置,如:

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

答案 5 :(得分:1)

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

享受!

答案 6 :(得分:0)

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