Detect orientation change from within cross-domain iframe

Question

So I have a .jsp page that has an iframe in it. The content of this iframe is hosted on a separate domain. On a mobile device, I'm looking for this iframe to detect an orientation change and alter the dimensions of the content accordingly.

Is there a way to add an event listener to the content stored within this iframe that would detect an orientation change?

If this content were not within an iframe, and accessed directly instead, a call like: window.addEventListener('orientationchange', FunctionToBeCalled, false); successfully catches an orientation change and calls the appropriate function. However, I can't seem to get this to work from within the iframe. I've tried parent.addEventListener, parent.window.addEventListener, top.addEventListener, etc. but to no avail.

From what I've read it sounds like since this is a cross-domain call I have very limited parent functionality available to me, am I doomed to fail?

Any help would be greatly appreciated. Thanks!

Answer 1

If you own the code of the parent window you can use cross document messsages to solve this. You could send the orientation from the parent window to the iframe. This should work as well in the cross domain scenario. I tested this on iphone 4.3 and android 2.2.

In the parent window : register for orientation changes and transfer it to the iframe

window.addEventListener("orientationchange", function(){
                var iframe = document.getElementById("youriframe").contentWindow;
                iframe.postMessage({
                    orientation: window.orientation
                }, 'http://the.domain.of.the.iframe.com');
}, false)

In the iframe : subscribe to orientation changes from the parent

window.addEventListener("message", function(e){
            var newOrientationValue = e.data.orientation;
            alert(newOrientationValue); // <--- DO your own logic HERE
}, false)

Check this out for more details : http://html5demos.com/postmessage2