Javascript: How to capture the height of the content of a website?

I am trying to find the correct Javascript code to capture the height of all the content on a webpage.

I have looked at document.height, window.screen.height, document.body.offsetHeight, bodyScroll, clientArea.style.height, bodyHeight, and document.documentElement.clientHeight.

I am using FireBug to test these values but all (except for the window.screen.height) seem to change as I resize my window, so they are not actual reporting the actual height of the content.

Now, the window.screen.height never changes, even if I change to different pages with different sizes.

How can I determine the total height of the content? Basically I need to know what the scroll bar knows. Th scr开发者_JAVA技巧ollbar knows how much to scroll per page and how much to scroll to reach the end of the content.

Any help would be greatly appreciated.

Try this:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>
<script type="text/javascript">

$(document).ready(function(){

document_height = $(document).height();
document_width = $(document).width();
window_height = $(window).height();
window_width = $(window).width();

alert(document_height + ' x ' + document_width);

alert(window_height + ' x ' + window_width);
});

</script>

Different browers report the size of the window and size of the document in different ways. You can use a library to get around the cross browser problems, like this code in jQuery:

$(document).height();

Without a library, I have used this code to get the dimensions:

var b, h, info;
b = document.body;
h = b.parentNode;
if (window.opera) {
  info = { winWidth: b.clientWidth, winHeight: b.clientHeight, pageWidth: h.clientWidth, pageHeight: h.clientHeight };
} else {
  info = { winWidth: h.clientWidth, winHeight: h.clientHeight, pageWidth: b.clientWidth, pageHeight: b.clientHeight };
}

var height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);