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 purpose 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 to see.
- Hidden iframes are used in ajax and/or predating what is today referred to as ajax. Load me for more info. Each of the following links requests different information from the server which you will see displayed near the bottom of the div below. Link 1, Link 2, Link 3.
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.
This tutorial's examples are available for download in a zipped file. Code presented in the Iframes Tutorial is free for all uses. Donations are always appreciated!
Back to Iframes Tutorial