Automatic IFRAME Height Sizing Using jQuery

Over the last few months at my job, I've been primarily working on a website build on DotNetNuke. For those of you that are unfamiliar with DNN, it's similar to several other web Content Management Systems out there, like Joomla.

Anyway, I've run into a couple of situations now where I've been asked to display HTML content from an external source somewhere within my site without completely navigating the user away from our site. Quite often, they want to display this external content in its entirety, and the only elements of my site that they want to keep are site navigation and the user's login session. To me, the obvious answer is to use an HTML IFRAME tag inside of a DNN Text/HTML module.

However, this presents a couple of annoying issues. For one thing, the height of the IFRAME element will not resize itself to the height of the referenced content. Even if you set the height to 100% in the style, the browser will simply pick a default height and stick with that. I suspect that the cause of this is that the style gets loaded and applied before the browser really knows the height of the frame's contents. The same problem manifests itself when clicking a link within the IFRAMEd content.

Anyway, I've been looking at this cool Javascript library over the last few weeks, called jQuery. This is the first Javascript library that I've taken the time to learn about seriously, and it's turning out to be a very rewarding endeavor. jQuery's basic philosophy is "Find things, do stuff." What this means is that you have a very flexible way of selecting elements from your page for manipulation. You can use almost any combination of CSS, XPath, or custom jQuery selectors to target what part of the document you want to work on.

There's lots of help for learning jQuery right on their site, so I won't cover any of that here. Instead, we'll jump right to the interesting parts.

First off, you need to use the jQuery.noConflict() function with DNN to prevent them from stepping on each others' toes.

After that, create a function that'll find our IFRAME on the page and resize it appropriately. In a minute you'll see why we're doing this in its own separate standalone function instead of jQuery("document").ready().

function sizeIFrame() {
var helpFrame = jQuery("#helpFrame");
var innerDoc = (helpFrame.get(0).contentDocument) ? helpFrame.get(0).contentDocument : helpFrame.get(0).contentWindow.document;
helpFrame.height(innerDoc.body.scrollHeight + 35);
}

As you can see, we're basically grabbing the element using jQuery and resizing it based on the height of its content - all this in a cross-browser compatible manner.

Finally, we write the ready function using some shortcut code, which calls sizeIFrame and attaches sizeIFrame to the IFRAME's load event handler. The reason for this is so that if we click on a link within the IFRAME, the IFRAME can be properly resized to the new content.

jQuery(function() {
sizeIFrame();
jQuery("#helpFrame").load(sizeIFrame);
});

Now we simply add an IFRAME with an id attribute of helpFrame anywhere on the page, and that frame will automatically be resized to fit its contents no matter what!