Although frame is generally not recommended on most of the web pages, iFrame can still be useful in some occasions, especially as an Ajax alternative. One strength of Ajax is that it greatly reduces (or at least it appears so) the page response time by only changing a small part of the page. Using Ajax to submit a form is a great example. This usability improvement doesn’t come free though. In order to use Ajax to send the form data back to the server, the JavaScript code has to be written to collect the form data and append them to the request URL as GET or POST parameters. Frameworks like JQuery or Prototype make this process a lot easier.
However there is some limitation to use Ajax to post a multi-part form. Although it might be possible, it is definitely not a clean implementation, and it is not supported by most of the browsers. In this case, iFrame may be a good alternative. The inner frame page will handle the multi-part form and the parent page will have the similar Ajax effect. That being said, iFrame’s biggest problem is that its width and height are set right from the start and it won’t adjust based on the source content. This will leave the ugly scrolling bars around the iFrame, or some content will be hidden if the scroll bar is disabled. For most of the pages, the width is somewhat less of a problem but the height is harder to control and set correctly.
The good news is there are ways to dynamically adjust the height of the iFrame based on the inner content. There are different ways to achieve this using JavaScript. I found this approach is the best:
Using jQuery, we can add the following code in the iframe source content:
<script type=”text/javascript”>
$(document).ready(function() {
var theFrame = $(”#iFrameToAdjust”, parent.document.body);
theFrame.height($(document.body).height() + 30);
});
</script>
The JavaScript will get the iframe object from the parent DOM and change its height according to the size of the current document after the document is loaded (very important to get the true size). I like it because it is less intrusive to the page where the iframe is on, and the iframe source kind of “take care of its own size” when being displayed. If the source page is displayed as regular page, there simply will not be any adjustment. With the help of jQuery the code is quite clean and simple. Of course the iframe source has to be an internal page and the developer has the permission to add the code.
From my testing result, this works in FF2, IE7 and Opera 9.25, not in Safari 3.1 for Windows though.
Some updates:
I found it work better to put the JavaScript which adjusts the frame height in the body onLoad attribute. Basically “ready” function will be kicked off when the DOM is loaded, at which point the page may or may not be completely loaded. The onLoad event will be a better bet in this case since we need the actual size of the page including all the images.
