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 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.