I have a page on www.domain.com and another page on sub.domain.com. sub.domain.com will be shown on www.domain.com in an iframe. I'm trying to dynamically calculate the height of this iframe based on the content of the iframe.
<iframe onload="calcHeight();" id="iframe" src="sub.domain.com"></iframe>
<script type="text/javascript">
function calcHeight()
{
//find the height of the internal page
document.domain = 'domain.com';
var the_height=parent.document.getElementById('iframe').contentWindow.document.body.scrollHeight +25;
//change the height of the iframe
parent.document.getElementById('iframe').height=the_height;
}
</script>
The src page DOES contain document.domain= 'domain.com';
It's working on all major browser besides IE9, which gives me an access denied on the javascript above. All solutions I read is dynamically adding the document.domain line to the iframe source, but as said, this is already in my static iframe source.
Whats wrong?
-edit-
Based on the suggestion I now have this on www.domain.com
<script type="text/javascript">
document.domain="domain.com";
</script>
<iframe style="border:0px;width:100%;" onload="calcHeight();" id="iframe" src="sub.domain.com"></iframe>
<script>
// IE hack
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE");
if (msie > -1) {
var source = "javascript:'<script>window.onload=function(){document.write(\\'<script>document.domain=\\\"" + document.domain + "\\\";<\\\\/script>\\');document.close();return \\\"+url+\\\";};<\/script>'";
$('#iframe').attr("src", source);
}
// End IE hack
function calcHeight()
{
//find the height of the internal page
var the_height=parent.document.getElementById('iframe').contentWindow.document.body.scrollHeight +25;
//change the height of the iframe
parent.document.getElementById('iframe').height=the_height;
}
</script>
-edit 2- Based on the last remarks I now have this
<script type="text/javascript">
document.domain="domain.com";
url="sub.domain.com";
function calcHeight()
{
//find the height of the internal page
var the_height=parent.document.getElementById('iframe').contentWindow.document.body.scrollHeight +25;
//change the height of the iframe
parent.document.getElementById('iframe').height=the_height;
}
</script>
<iframe style="border:0px;width:100%;" onload="calcHeight();" id="iframe" src="javascript:'<script>window.onload=function(){document.write(\'<script>document.domain=\'domain.com\';<\\/script>\');document.close();return \'+url+\';};</script>'"></iframe>
Now I don't see the source page anymore.