Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Determine iFrame height dynamically?

  • 1 reply
  • 24 have this problem
  • 12 views
  • Last reply by cor-el

more options

I am loading a PHP-based webpage inside an iframe of another webpage. As I understand, the iframe has exactly one event that can be used by Javascript: onload. With this event, I am able to size the iframe to the size of the content.

However, if the height of the inner page changes, I cannot resize the iframe to fit the inner page's new height. This causes two scrollbars to appear: one attached to the inner webpage, and one attached to the outer webpage (which the iframe resides in). The outer scrollbar is acceptable by the users, but the inner one is not -- it creates navigation problems and other confusion.

I cannot fix this via Javascript (that I know of), since these webpages are on different sites, and will cause cross-site errors. I cannot ask the users to allow cross-site exceptions. I am not able to change the iframe size using innerHTML -- the innerHMTL.height does *not* change when the HTML content grows in height; instead, a scrollbar appears at that point, and the height remains the same.

All that is needed, really, is *dynamic* access to the inner HTML's dimensions. (This may require another event within the iframe object, something like onInnerHTMLChange; however, other solutions can be found if the innerHTML height is accessible.)

What I would like to know is if there is any way to resize the iframe according to the dynamic height of the content. Also, am I right in understanding that an iframe is actually another browser window object?

I am loading a PHP-based webpage inside an iframe of another webpage. As I understand, the iframe has exactly one event that can be used by Javascript: onload. With this event, I am able to size the iframe to the size of the content. However, if the height of the inner page changes, I cannot resize the iframe to fit the inner page's new height. This causes two scrollbars to appear: one attached to the inner webpage, and one attached to the outer webpage (which the iframe resides in). The outer scrollbar is acceptable by the users, but the inner one is not -- it creates navigation problems and other confusion. I cannot fix this via Javascript (that I know of), since these webpages are on different sites, and will cause cross-site errors. I cannot ask the users to allow cross-site exceptions. I am not able to change the iframe size using innerHTML -- the innerHMTL.height does *not* change when the HTML content grows in height; instead, a scrollbar appears at that point, and the height remains the same. All that is needed, really, is *dynamic* access to the inner HTML's dimensions. (This may require another event within the iframe object, something like onInnerHTMLChange; however, other solutions can be found if the innerHTML height is accessible.) What I would like to know is if there is any way to resize the iframe according to the dynamic height of the content. Also, am I right in understanding that an iframe is actually another browser window object?

Modified by delfeld

All Replies (1)

more options

You can ask questions and advice about web development at the mozillaZine Web Development/Standards Evangelism forum.

A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.

The helpers at that forum are more knowledgeable about web development issues.

You need to register at the mozillaZine forum site in order to post at that forum.

See http://forums.mozillazine.org/viewforum.php?f=25