Using a Hidden Iframe
You can hide an iframe by setting its width and height to zero or by setting its visibility to hidden in the style sheet. If you set display to none it may not function properly.
Hidden iframes were used for ajax-like functionality before XMLHttp and the term ajax were born. Iframes are still frequently used for this purpose, since they have the advantage of maintaining browser history.
Unfortunately, hidden iframes are also used in injection attacks.
Hidden Iframe for Seamless Display
The code transfers the content of the hidden iframed document into a div that can expand and contract according to the amount of content coming from the iframe. The content becomes part of the containing document and inherits the styles from the containing document. Styles included in the iframed document itself will not be applied.
Links will by default open in the main window although you can use the target attribute to load them in the hidden iframe if you prefer. The example demonstrates and provides more information.
.load function is called onclick of links or elsewhere in your code to load a new document into the iframe. A
.display function is called when the iframe loads. You can specify a callback to be invoked at this time as well.
- At the time of this writing browsers do not yet support in any meaningful way the intended functionality of the new HTML5
seamlessattribute for the iframe element. ^