If you have a page and an iframe in it, and the iframe viewport height changes, browser adds scrollbars to the iframe.
Sometimes it’s ok, but when you need your iframe to “expand” automatically on the host page, you have to change the iframe object height style property. And it’s dead easy when both iframe and the host page are from same origin – you just talk to parent window from the iframe and make it set the object height.
However, when cross-origin security model applies, everything gets more interesting, and you’re pretty much limited to CDM/window.name/location.hash transports.
So the proper approach would be to use CDM with a fallback to location.hash – newer browsers (IE8+ and current Firefox, Opera, Safari and Chrome) support postMessage, older versions will fall back to setting parent page location.hash property and on the parent page – interval polling for changes.
Here’s a basic working sample implementing this approach and here’s the code for it:
Please note that in this sample no origin check is done for the message on the parent page and the message is sent from the client page to * origin. This might be a serious security breach since the parent page will process a message send from any page, but in my case it’s OK because the worst thing that can happen – the iframe height will change. Please don’t use this as a universal solution for cross-iframe communication – there’re plenty of plugins and libraries that do it properly.
I built it this way just to fit my exact needs – i.e. change height of the iframe object on a parent page.