Detecting browser height

Here is an example of one way to find out the height of the browser window from inside Flex. It is very easy to find this out if your have your Flex application set to height="100%". But if you use a fixed height like height="300" then stage.stageHeight and app.height both return 300.

This example uses the ExternalInterface to determine the height of the browser by calling the eval javascript function (it is a built-in function).

E.g.

var browserHeight:Number = ExternalInterface.call("eval", "window.innerHeight");

Different browsers (NS, FF, Chrome, IE, Safari) obviously don't all support this call. So far the window.innerHeight property works on all of them except IE. For IE you can use this one (IE 7 and above I think?):

var browserHeight:Number = ExternalInterface.call("eval", "document.documentElement.clientHeight");

And if your browser is older you can try this one:

var browserHeight:Number = ExternalInterface.call("eval", "document.getElementsByTagName('body')[0].clientHeight");

Browsers will also handle errors differently, so if you try to use one of those JavaScript functions in one browser you might get undefined return, and in another browser you might get an error dialog box.

Here is an example of this in action, it opens in a new browser window to show it properly.
If it was embedded on this page using an <iframe> tag then the size returned is that of the iframe, not the browser.

- Browser Height Example -


Obviously if you were interested in the browser width then you could do exactly the same thing but replace innerHeight with innerWidth and clientHeight with clientWidth.

Comments welcome.