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>
<iframe src="http://manikandanmv.wordpress.com/ajax.html" name="testIframe" id="testIframe" onload="setIframeHeight();" />
</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.
Tags: contentDocument, contentWindow, dynamically change iframe height, iframe contentDocument, iframe height, iframe height change, iframe height IE, iframe offsetHeight, iframe scrollHeight, offsetHeight, resize iframe, resize iframe height, resize iframe IE
May 25, 2009 at 10:01 am |
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
May 25, 2009 at 10:23 am |
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..!
May 25, 2009 at 11:15 am |
Thanks.. Nice work.. its working