Visible window height instead of $(window).height();

Question

Is there any way to get the visible height of the whole page from inside an iframe, $(window).height() gives me the iframes height?

Answer 1

I have always used this implementation

window.innerHeight or document.body.clientHeight or document.documentElement.­clientHeight depending on the browser.

But i don't see why jquery's $(window).height() wont work for your visible height ?

Answer 2

If you are using frames, you can get the height of the outermost window by using window.top in the jQuery constructor. The height of window.top will get the height of the browser window.

$(window.top).height();

Edit: Updated window.top reference as Mozilla moved their documentation around.

Answer 3

I had cause to address a similiar issue today, because in FF screen.height and window.innerHeight return the same value, and of course my first response was to check for solutions on SO. In the end this is how I addressed the matter, and I'm posting the longwinded version here for posterity only...

function visibleWindowHeight( callback ) {
    /* create temporary element 'tmp' */
    var vpHeight,
        tmp = document.createElement('div');

    tmp.id = "vp_height_px";

    /* tmp height = viewport height (100vh) */
    tmp.setAttribute("style", "position:absolute;" +
        "top:0;" +
        "left:-1px;" +
        "width:1px;" +
        "height:100vh;");

    /* add tmp to page */
    document.body.appendChild(tmp);

    /* get tmp height in px */
    vpHeight = document.getElementById("vp_height_px").clientHeight;

    /* clean up */
    document.body.removeChild(tmp);

    /* pass value to callback and continue */
    callback( vpHeight );
}

document.addEventListener('DOMContentLoaded', function() {

    visibleWindowHeight( function( visibleHeight ) {

        console.log("visibleHeight:", visibleHeight);
        /*
            ... continue etc etc  ...
        */
    });

}, !1);

It might help someone, sometime.