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
- 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.
- Might require changes to browser security settings or modification of trusted sites list.
- 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
- 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.
- 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.