Using a Hidden Iframe

You can hide an iframe by setting its visibility to hidden in the style sheet. If you set display to none it may not function properly. You can be sure your iframe is hidden if you include the following style specifications:

iframe {
    visibility: hidden;
    position: absolute;
    left: 0; top: 0;
    height:0; width:0;
    border: none;

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 JavaScript demonstrated in this portion of the Iframes Tutorial uses a hidden iframe to seamlessly incorporate its content into the containing document. This provides some of the features that the seamless iframe attribute introduced in HTML5 will provide.[1]

The JavaScript 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. JavaScript in the containing document can be applied to the new content coming from the iframe by means of callback capability provided in the JavaScript. See more on this below.

The JavaScript

The JavaScript to transfer the contents from the hidden iframe for seamless display is very brief, consisting of only two functions and a few properties. A 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.

An example demonstrates and provides more information. The example is also included in the download file.

Don't forget: An error of access denied or permission denied will be triggered if you try to use JavaScript to access the document loaded into the iframe if it is from another domain. Find out more about the same origin policy.

Demonstration, Download, and More

An example demonstrates the JavaScript presented here. It is included in a download file along with the other tutorial examples. See the rest of the Iframes Tutorial which includes much more information on iframes and how they are used.

  1. At the time of this writing, browsers do not yet support the intended functionality of the new HTML5 seamless attribute for the iframe element. ^