Replicating jQuery's $('body').outerHeight(true) without jQuery
<p>I have some pages which load into an iframe in a parent page and I am using postMessage to send the height of the child page to the parent so it can resize the iframe. The child pages are very simple and it seems a shame to have the extra size of jQuery just to find the height of the body. However I haven't so far been able to replicate the effect of the above call in straight JavaScript.</p>

<p>I've tried differing combinations of scrollHeight, offsetHeight and clientHeight applied to the body and to body.documentElement but none match. And they are very different in different browsers, especially if you switch between child documents of widely differing sizes. Here is the actual code of the onload event handler for all the child pages:</p>

<pre><code>window.onload = function() {
    alert("height(1) = " + document.body.scrollHeight + "\n" +
        "height(2) = " + document.documentElement.scrollHeight + "\n" +
        "height(3) = " + document.body.offsetHeight + "\n" +
        "height(4) = " + document.documentElement.offsetHeight + "\n" +
        "height(5) = " + document.body.clientHeight + "\n" +
        "height(6) = " + document.documentElement.clientHeight + "\n" +
        "height(7) = " + $('body').outerHeight(true)
    );
    parent.postMessage($('body').outerHeight(true) + "px", "*");
}
</code></pre>

<p>None of the first six values matches the seventh in each browser (IE8/FF/Chrome) in each circumstance. The second one is nearest but it fails in Chrome when switching from a large child page to a smaller one - it still gives the size of the previous page.</p>

<p>I did read the source of jQuery but my JavaScript isn't good enough to work out what it's doing.</p>
