0
votes

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>docum‌​ent.domain=\'domain.com\';<\\/script>\');document.close();return \'+url+\';};</script>'"></iframe>

Now I don't see the source page anymore.

1
I have no clue what you mean with the second remark?Jeroen Swets

1 Answers

1
votes

Sorry, but because i had the same problem and i solved in this way can i ask you to try it exactly in this way:

var url = $('#iframe').attr("src");
if (isMSIE() == true) {
        url = "javascript:'<script>window.onload=function(){document.write(\\'<script>document.domain=\\\"" + document.domain + "\\\";<\\\\/script>\\');document.close();return \\\"+url+\\\";};<\/script>'";
    }

$('#iframe').attr("src", url);

The problem seems related to IE and what i did was to substitute the url whith a dynamic javascript that change the domain and return the url of iframe Mainly, what happened to my customer was that the iframe appeared too little that is the motivatoin I used this approach:

Moreover the iframe from IE source:

<iframe width="300" class="vytmn-frame" id="iframe" src="javascript:'<script>window.onload=function(){document.write(\'<script>document.domain=\&quot;localhost\&quot;;<\\/script>\');document.close();return \&quot;+url+\&quot;;};</script>'" frameborder="0" scrolling="yes" horizontalscrolling="no" verticalscrolling="yes"></iframe>

In other words my problem was i to permit a full sized iframe because the iframe itself was shown by the browser too little and so invisible.

Sorry and I hope this time i gave you whaat i did. It is unusefull to calculate the height: you have no access to the document inside the iframe. Sorry again.