Version 2 : Dynamically change IFrame Heights


This is a continuation of my previous blog. Dynamically change IFrame Heights – here loaded a static HTML content on iframes.
In version 2, we have loaded dynamic files inside the iframes. At the same time we have to dynamically change the height of iframes based on their loaded file content.

Sample Code

Below code works well in both browsers Firefox & Internet Explorer.

<html>
<body>
<script>
function setIframeHeight()
{
    var elt = document.getElementById('testIframe');
    if(elt.contentWindow){
        document.getElementById('testIframe').height = elt.contentWindow.document.body.scrollHeight + 30;
    }
}
</script>


</body>
</html>

contentWindow

  • returns an window object of the iframe.

scrollHeight

  • is a property which returns the scrolling height of the object.
  • the value specifies only the visible height of the object.

elt.contentWindow – returns the object of IFrame window.
elt.contentWindow.document – returns the object of HTML document.
elt.contentWindow.document.body – returns the object of HTML body element.

You may also use contentDocument property for getting height of iframe. This will work only in Firefox. Since IE6.0 or 7.0 does not support this property. This has been supported from IE version 8.0

Sample code for doing the same in Firefox with contentDocument

if(elt.contentDocument){
elt.height = elt.contentDocument.body.offsetHeight+40;
}

contentDocument

  • returns an object of iframe document.

offsetHeight

  • is a property used to retrieves the height of the element/object in pixels.
  • this value includes the height of elements borders + padding.
Advertisements

Tags: , , , , , , , , , , , ,

5 Responses to “Version 2 : Dynamically change IFrame Heights”

  1. chennaiwebdesigner Says:

    Excellent work.. But when ever i change the html in the iframe its showing the previous html page. i need to clear the cache to see the updated html in iframe.

    Thanks

    • manikandanmv Says:

      i think there is no need for clearing the browser cache. simply do page refresh by pressing F5 button. One way you can see the updated html content is refresh the iframe content with some periodic intervals say, 1 minute.

      hope this helps..!

  2. chennaiwebdesigner Says:

    Thanks.. Nice work.. its working

  3. Parimal Says:

    It’s not working for Iframe having pages from outside the domain.

  4. Andrew Says:

    This doesn’t seem to work when the src of the Iframe is external to the domain such as src=”http://www.google.com”. I called the function from an onload in the body tag and my page is blank, so I’m assuming it’s coming up with a value of zero, and showing nothing, when without the script it shows an Iframe of 200px height.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: