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.

Hidden iframes can be used to circumvent JavaScript's same origin policy. See more at Julien Lecomte's Introducing CrossFrame.

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 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.

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

Links, styles and code can be set up with accessibility in mind. An example demonstrates and provides more information on the features described here. An example is included in the download file.

Dont' 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.

Back to top