I'm using Moodle:

I am trying to run some Javascript from within the frame to get the browser window height, so I can alert the user if they are using a less then optimal browser size.

I'v tried things like:

window.top.document.body.offsetHeight
document.documentElement.clientHeight
$(document).height()
$(window).height()

But they all give static heights which never change when I resize the browser.

Oh and it has to work in IE8.

I'm using Moodle:

I am trying to run some Javascript from within the frame to get the browser window height, so I can alert the user if they are using a less then optimal browser size.

I'v tried things like:

window.top.document.body.offsetHeight
document.documentElement.clientHeight
$(document).height()
$(window).height()

But they all give static heights which never change when I resize the browser.

Oh and it has to work in IE8.

• javascript
• jquery
• height

• which never change when I resize the browser....That's a responsive schema, you would need to be within the scope of $(window).on('resize', function(){ console.log($(window).height()); }); – Ohgodwhy Commented Aug 17, 2012 at 3:41
• I meant, between refreshing the browser. I had setup an alert to tell me the height on load. – Mint Commented Aug 17, 2012 at 3:46

2 Answers 2

You have to use the parent property of the iFrame window:

Run this code from within the iFrame, it will return the height of the parent window:

$(window.parent).height();

However, if you're using jQuery 1.8.0 this may not work if your browser is in quirks mode. As of jQuery 1.8.0, the mand $(window).height() stopped working for Internet Explorer in quirks mode and they don't plan to fix it.

If you're using jQuery 1.8.0, use this slight variation instead:

$(window.parent.document).height();

This will ensure cross-browser support, even in IE quirks mode ;)

http://www.w3schools./jsref/prop_win_parent.asp

One simple Solution will be to call a parent document function from iframe returning document height

Iframe Javascript :

alert(top.getDocHeight());  

Main Document Javascript :

function getDocHeight()
{
    return $(window).height();

}