iFrame dynamic resizing revisited

Its time to revisit the burning question once again!

“Is there a reliable way to dynamically resize the iFrame height according to its contents?”

Well according to my previous post I thought I nailed it! But I soon found out it wasn’t all that reliable! :( So it wasn’t the silver bullet I was hoping for. 

So as a part of “E2″ development, my mate Rob and I started on a journey to conquer this once and for all! Our findings were some what disturbing!

First of all, there ISN’T a silver bullet that solves the problem for all the browsers. The basic problem is that iFrames (along with applets) are handled differently on browsers as compared to other elements. In fact iframes are not handled by browsers at all, but by the OS. So the solution will never be the same for all the browsers. So heres what we found. 

IE 6/7

The solution is a nasty CSS hack. Until yesterday I have not heard about this trick. The trick is to have an expression like this in your CSS.

.iframe { height: expression(document.documentElement.clientHeight + "px"); }

IE being a special browser, it detects this expression and resize your iFrame accordingly. But there is a down side to this. Having expressions in your CSS affects your site’s performance. But having battered by this issue for days and nights, I am willing to go down this path for now!

FireFox 2 and 3 / Safari 3

Yes, they both behave the same way! So trick here is to wrap your iframe with a DIV tag and assign an  absolute positioning to the DIV. 

<div id="iframe_wrap"><iframe scrolling="auto" id="iframe" name="iframe" class="iframe" frameborder="0" src="source_page.html" width="100%" height="100%"></iframe></div>

And then apply styles to the DIV tag like below. 

#iframe_wrap {
position:absolute;
top: 60px;
left: 0;
right: 0;
bottom: 0;
}

This nice trick will get ride of the “double scrollbar” phenomenon as well. 

So there you go. The job is done!!! (At least for now) Special thanks to Rob for doing most of the “googling”!

About this entry

You’re currently reading “iFrame dynamic resizing revisited,” an entry on SlackCoders.com

Published:
06.05.08 / 12am
Category:
Coding, JavaScript