Resizing an iframe based on content from different domains

Resizing an iframe based on content from different domains

Developer's name is ConroyP

It's been said that this method can't be done, but it can be done based on this example code. This is from the developer below. I tried this and it works, but the only issue is there's a bug with Firefox/Safari that the height keeps expanding as you click through the Iframe.

Let me be clear. you must have access to both domains to add the code... My parent page will dynamcailly expand the iframe height based on how much content is on the child page, which the child page is from a different domain that I control.

This is from the developer...

There is a way around the same origin policy, but it requires changes on both the iframed content and the framing page, so if you haven't the ability to request changes on both sides, this method won't be very useful

There's a browser quirk which allows us to skirt the same origin policy - javascript can communicate either with pages on it's own domain, or with pages it has iframed, but never pages in which it is framed.

The key here is that helper.html can receive messages from framed.html, and can also communicate with home.html.

So essentially, when framed.html loads, it works out it's own height, tells helper.html, which passes the message on to home.html, which can then resize the iframe in which framed.html sits.

The simplest way we found to pass messages from framed.html to helper.html was through a URL argument. To do this, framed.html has an iframe with src='' specified. When it's onload fires, it evaluates it's own height, and sets the src of the iframe at this point to helper.html?height=N

Link to code:
http://stackoverflow.com/questions/1...203608#1203608