We had this type of problem, but slightly in reverse to your situation - we were providing the iframed content to sites on other domains, so the same origin policy was also an issue. After many hours spent trawling google, we eventually found a (somewhat..) workable solution, which you may be able to adapt to your needs.
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 to you, i'm afraid.
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
home.html can communicate with
framed.html (iframed) and
helper.html (same domain).
Communication options for each page:
| | home.html | framed.html | helper.html |
| www.foo.com/home.html | N/A | YES | YES |
| www.bar.net/framed.html | NO | N/A | YES |
| www.foo.com/helper.html | YES | YES | N/A |
framed.html can send messages to
helper.html (iframed) but not
home.html (child can't communicate cross-domain with parent).
The key here is that
helper.html can receive messages from
framed.html, and can also communicate with
So essentially, when
framed.html loads, it works out its own height, tells
helper.html, which passes the message on to
home.html, which can then resize the iframe in which
The simplest way we found to pass messages from
helper.html was through a URL argument. To do this,
framed.html has an iframe with
src='' specified. When its
onload fires, it evaluates its own height, and sets the src of the iframe at this point to
There's an explanation here of how facebook handle it, which may be slightly clearer than mine above!
// Resize iframe to full height
// "+60" is a general rule of thumb to allow for differences in
// IE & and FF height reporting, can be adjusted as required..
document.getElementById('frame_name_here').height = parseInt(height)+60;
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>
// What's the page height?
var height = document.body.scrollHeight;
// Going to 'pipe' the data to the parent through the helpframe..
var pipe = document.getElementById('helpframe');
// Cachebuster a precaution here to stop browser caching interfering
pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content
// Tell the parent iframe what height the iframe needs to be
var height = getParam('height');
// This works as our parent's parent is on our domain..
// Helper function, parse param from request string
function getParam( name )
name = name.replace(/[\/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
In my experience we have not had any problems with placing display advertising in IFRAMEs.