Using a Hidden Iframe
This portion of the Iframes Tutorial demonstrates and discusses some of the possible uses for hidden iframes for retrieving data from an external source to incorporate into an existing page.
As was mentioned in the tutorial, the iframe should be hidden by setting its height and width to zero or visibility hidden rather than display none in the style sheet in order to ensure that it will function properly.
Demonstration and Information
The following lists some reasons you might choose to make use of a hidden iframe rather than using it for its intended purposes of displaying content in an inline frame. Try the links for demonstration and further discussion of these uses. Clicking the "Load me" links retrieves a new document for the hidden iframe and displays its content in the bordered div below.
- Hidden iframes can be used to load new content to seamlessly integrate into the current page. You can use this approach to avoid the need for iframe's scrollbars or for other stylistic reasons. Load me (displayed on initial page load)
- Hidden iframes can be used to load new content for use with preexisting code on the page. This technique is demonstrated with dyn-web's Tooltip here. Load me
- Hidden iframes are used in ajax and/or predating what is today referred to as ajax, i.e., Remote Scripting. Load me or me or me. Each of these links requests different information from the server which you will see displayed in the div below.
Load me to see more information about the code.
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.
Back to Iframes Tutorial