Dynamic resizing of iFrame, pros and cons

If you are a web developer you have probably encountered iFrame resizing requirements.
Because of legacy code, your portal framework or some other reason you have to use an iFrame and because of the fancy layout from the designer you are required to introduce an iFrame that fills some section of the page that adjusts itself depending on the content that goes into the iFrame, and of course you do not want extra scroll bars appearing on this iFrame and you do not want a vertical scrollbars except from on the outer right side window edge when the page is long.

So how do you go about solving this problem? There is tons of sample code that shows what you can do but you will find few articles summing up pros and cons of alternative solutions.

Basically there are two solutions. I will explain them shortly and present a list of pros and cons. Examples of the two alternatives, I am sure you can find your self. jQuery can be used for both solutions.

Alternative 1) Resize iFrame from within inner frame
Description: With javascript on both the outer page (the one hosting the iFrame) and inner page, iFrame is resized after the inner page has checked its own height and sends this value to its parent. In order to allow cross frame scripting you may need to set the document.domain property on both pages.

Pros:

• We get a scrollbar on the outer most right side (browser window) when the page is long. Same as on all other type of long pages.
• Script only needed on long pages.

Cons:

• Might require changes to browser security settings or modification of trusted sites list.
• When the inner iFrame page has dynamic content (uses ajax/dhtml) that expands the initial page, multiple scrollbars will appear unless you attach your javascript to these dhtml functions.
• Requires that you have control over pages that are to be hosted within the iFrame. javascript must be included on each page (or a shared include/template file).
• Requires setting document.domain property using javascript which might cause future unexpected problems because of dependencies?.
• Both hosted page and parent page need to have the same domain names (not the same subdomain) using the same protocol (http/https).

Alternative 2) Resize iFrame to fit page from outside
Description: Using javascript, iFrame is automatically resized to fit outer window on window load and resize event.

Pros:

• Approach is guarantied to work (if JS is enabled). This means less risk and less chance of bugs.
• Less complex solution and therefore more likely to work over time as you or your IT department do browser upgrades or make changes to browser settings.
• Can be used to show external resources not under your control.

Cons:

• The scrollbar will not span the entire height of the window. Only from the position of the top navigation menu or so and down to the window bottom.
• While resizing the window there will be some flickering and scrollbars might seem sluggish.
• iFrame must span entire width of window, this might put some restrictions on layout design.
• Script to resize iFrame always have to be triggered on page load (and resize) and might contribute to slower rendering on very slow machines.