Dynamically re-size an iFrame's height across browsers

A while back I had a need to dynamically re-size an iFrame's height and found a solution using a jQuery plug-in called autoHeight.

What I later found was that this solution provided poor results with Internet explorer when my iFrame's contents were fairly large and frequently changing (i.e. via navigation inside the iFrame).

It took quite a bit of tinkering but I was able to come up with a solution that works (and works well) in IE, Firefox, Safari and Chrome.

It still uses jQuery but doesn't depend on a plug-in.

Here's the code in case you're looking for the same thing:

First, the iFrame...

Next, the JavaScript to resize it...

function sizeFrame() {
          jQuery("#MyFrame", top.document).css({ height: 0 });
          var heightDiv = jQuery("#MyFrame", top.document).contents().find('body').attr('scrollHeight');
          jQuery("#MyFrame", top.document).css({ height: heightDiv });
     }

     jQuery(function() {
          sizeFrame();
          jQuery("#MyFrame").load(sizeFrame);            
     });

This line is needed to initially initialize the height so that it works in Safari and Chrome. Without this line the window will never shrink to fit smaller content, it will just retain the last biggest height.

jQuery("#MyFrame", top.document).css({ height: 0 });