I am using this code to dynamically resize an iFrame depending on the content of the remote site:

However, on that remote site, there are other pages as well. What happens is that when I click on a link on the remote site (inside the iFrame), the height doesn't change accordingly. Instead it uses the height of the page that we initially set on the iFrame. In this case it uses the height of remote.php (which is quite tall):

<iframe id='local-iframe' width='1' height='1' frameborder='0' scrolling='no' src ='.php'></iframe>
</iframe>

Another thing is that, even if I indicated scrolling='no' on the iFrame, once I clicked a link on inside the iFrame, the scroll bars re-appear.

Is there any solution to this problem? What are we doing wrong?

I am using this code to dynamically resize an iFrame depending on the content of the remote site:

http://solidgone/Set-IFRAME-height-based-on-size-of-remotely-loaded-content

However, on that remote site, there are other pages as well. What happens is that when I click on a link on the remote site (inside the iFrame), the height doesn't change accordingly. Instead it uses the height of the page that we initially set on the iFrame. In this case it uses the height of remote.php (which is quite tall):

<iframe id='local-iframe' width='1' height='1' frameborder='0' scrolling='no' src ='http://remotesite./remote.php'></iframe>
</iframe>

Another thing is that, even if I indicated scrolling='no' on the iFrame, once I clicked a link on inside the iFrame, the scroll bars re-appear.

Is there any solution to this problem? What are we doing wrong?

• javascript
• jquery
• iframe
• onload

2 Answers 2

The code at this site (below) worked for me, though I'm working on getting the border to disappear...

http://ramanisandeep.wordpress./2009/12/16/how-to-dynamically-adjust-an-iframe’s-height/

Insert iframe on page

<iframe scrolling='no' frameborder='0' id='frmid' src=’getad.aspx'
         onload='javascript:resizeIframe(this);'>
</iframe>

Use this javascript to resize iframe based on the height & width of child page

<script language="javascript" type="text/javascript">
 function resizeIframe(obj)
 {
   obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
   obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
 }
 </script>

I think you can't directly access IFRAME's content in any possible way nowadays. So therefore you can't directly detect it's height either.

As you can read from the article you're referring to, author has written an update: http://solidgone/Redux-Set-IFRAME-height-based-on-size-of-remotely-loaded-content

If I understood correctly, it's making a request with height as parameter on local resource, which would help setting the height.