Total Height Of The Page

I'm trying to get the total height of a page using JavaScript so I can check if the page is long enough to display something, however in my testing I am unable to get the total hei

Solution 1:

Without a framework:

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

Solution 2:

document.documentElement.scrollHeight is working ok for me in the latest version of Internet Explorer, Chrome, Firefox and Safari.

Solution 3:

Have you tried $(document).height(); ?

Demo here

Solution 4:

Height of entire page...

document.body.offsetHeight

Height of viewport...

var h,
de = document.documentElement;

if (self.innerHeight) {h = window.innerHeight;}
elseif (de && de.clientHeight) {h = de.clientHeight;}
elseif (document.body) {h = document.body.clientHeight;}

This article may help you.

Solution 5:

To find the height of the entire document you could just find the highest DOM Node on current page with a simple recursion:

;(function() {
    var pageHeight = 0;

    functionfindHighestNode(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 foundconsole.log('Page height is', pageHeight);
})();

NOTE: It is working with Iframes.

Enjoy!