IFRAME SOURCE CONTROLS IFRAME SIZE


HOME
©2015-, mrkent.com
I have a blog page which posts the current blog as well as the previous two blogs into an iframe on the main page. A visitor may also click on one of the archives to be displayed in the iframe. The problem I ran into was how to resize the iframe to neatly enclose anything posted to it, regardless of the source. In the process of solving this issue I tried several different methods found on sites like stackoverflow.com, CSS-Tricks.com, w3schools.com, and a few others I do not recall.

NOTE: The iframe tag MUST have a name attribute as well as an id attribute.

The main problem with most resolutions was that, after resizing the iframe the first time, it could not be resized without reloading the page. The solution shown here is the one I finally settled on. You will find that it works without having to reload the main page. Experiment with the example to the right. (NOTE: Chrome seems to maintain a default minimum sized iframe while the other browsers are more flexible)

MAIN PAGE - Text Box



IFRAME