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?

What do you mean by "visible height"? `$(window).height()` gives you the height of the view pane. — lonesomeday, Aug 10 '11 at 09:26
$(window).height() works better as it's cross-browser. I.e., your answer is better :). — g_thom, Aug 10 '11 at 09:28
I need the browsers visible height, and not the height of the document. I have an `iframe` which height is set to 3500px, and if I try to get the `$(window).height();` it just gives me 3500px; — curly_brackets, Aug 10 '11 at 09:45

score 54 · Accepted Answer · edited Jun 07 '12 at 19:38

54

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.

edited Jun 07 '12 at 19:38

rossisdead

2,102
1
19
30

answered Aug 10 '11 at 09:50

lonesomeday

233,373
50
316
318

5

Note - this won't work if the frames are in two different domains, such as with Facebook apps. – Daniel Schaffer Nov 15 '12 at 19:08
Also doesn't seem to work in jsFiddle when running `window.top.innerWidth` within the `result` frame in chrome developer tools console: `Uncaught DOMException: Blocked a frame with origin "https://fiddle.jshell.net" from accessing a cross-origin frame`. I suppose the `top` window is at domain `https://jsfiddle.net`. – user1063287 Jul 01 '17 at 09:27
doesn't work with HTML 4.01 in Chrome – Martin Zvarík Jan 03 '23 at 15:19

score 30 · Answer 2 · answered Aug 10 '11 at 09:31

30

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 ?

answered Aug 10 '11 at 09:31

MarutiB

924
2
9
17

1

It's because I use it within an `iFrame` on a Facebook App. The `iFrame`it self if 3500px height, but I just want to know the users window height. – curly_brackets Aug 10 '11 at 09:37
None of those work. It gives me the height of the `iFrame` and not the height of the browsers visible area. – curly_brackets Aug 10 '11 at 09:43
since you are in an iframe. the window object will only reference your page. the parent page will have a different window object. And I think cross domain problems will prevent you from acessing the data :( . There must be a way facebook gives u the total height no ? – MarutiB Aug 10 '11 at 09:46

score 0 · Answer 3 · answered Jul 14 '18 at 14:28

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.

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

3 Answers3

Linked