This is a DOM demonstration in the browser. In order for you to see it, you will need
a browser that supports the W3C DOM standard, like the
mozilla 5 web browser.
Demo links
Dynamically importing content into the Document
using IFRAMES and DOM interfaces
This example demonstrates how to use iframes to retrieve content information from a webserver
and dynamically append the external content into the main document.
With this demo you can perform three kinds of operations, which are:
create a new IFRAME element, hide it and retrieve content from the web server.
- Creating the IFRAME element
The first operation creates an IFRAME element using DOM - please refer to the javascrit function createFrame(). The element created is referenced by a JavaScript variable, but it's not inserted in the HTML DOM tree at this time. It's important to note that the iframe will not load the page we set until it is inserted into the HTML DOM tree. After the creation of the iframe the other two operations are enabled and can be performed in any order.
- Hiding the IFRAME element
The second operation hides the iframe (hideFrame()). Because the iframe will only load a page when it is inserted into the DOM tree, we have to insert it into the DOM tree in order to retrieve information from the web server. But, as we don't always want to show the iframe used to retrieve the data inside our HTML page, we can hide it using a DIV element. In this example the div is hidden and positioned where it will not mess with our page's layout.
- Retrieving content from the web server
The third operation inserts the iframe into the DOM tree (appendFrame()). This will cause the iframe to load the page and because the retrieved page has an onload attribute, this page will callback the demo page using the function iframeCallback(obj), and that's how we know that the IFRAME page has been loaded! Finally, the function iframeCallback(obj) copies the content inside mydata tag loaded by the iframe to the demo HTML page.