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.
There's a browser quirk which allows us to skirt the same origin policy - javascript can communicate either with pages on its own domain, or with pages it has iframed, but never pages in which it is framed, e.g. if you have:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.html
then 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 home.html
.
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 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 its onload
fires, it evaluates its own height, and sets the src of the iframe at this point to helper.html?height=N
There's an explanation here of how facebook handle it, which may be slightly clearer than mine above!
CodeIn www.foo.com/home.html
, the following javascript code is required (this can be loaded from a .js file on any domain, incidentally..):
<script>
function resizeIframe(height)
{
document.getElementById('frame_name_here').height = parseInt(height)+60;
}
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>
In www.bar.net/framed.html
:
<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>
<script type="text/javascript">
function iframeResizePipe()
{
var height = document.body.scrollHeight;
var pipe = document.getElementById('helpframe');
pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();
}
</script>
Contents of www.foo.com/helper.html
:
<html>
<body onload="parentIframeResize()">
<script>
function parentIframeResize()
{
var height = getParam('height');
parent.parent.resizeIframe(height);
}
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 )
return "";
else
return results[1];
}
</script>
</body>
</html>