How to dynamically load any html file component
When a browser loads a page it normally displays the components of that page as they are downloaded. (Although there is some variation of behaviour between browsers.) Thus typically text appears before images (because images take longer to download) and images earlier in the file will appear before images later in the file (because the download of those images will have started earlier).
The contents of this article have been tested with:
- Internet Explorer 5.5, 6, 7, 8 , 9
- Mozilla 1.0, 1.7.2, Firefox 2, 3
- Opera 9
- Netscape 6.2, 7.2
- Mac OS X IE 5.2.2 and Safari beta - thanks to J Bradley for reporting this.
There are a number of different techniques that can be used to dynamically load components. This page includes a number of different techniques for controlling the loading of html file components:
See also 'How to change the load order of images'.
These techniques can be used to delay the loading of images or other slow to download files until after the bulk of the html file had been processed or could be used to dynamically generate the file contents.
The HTML contained within a set of
<DIV> tags can be
<div id="DivExample"> Hello World </div>
all the HTML enclosed between the
In this way it can be changed to any valid html combination. The following three buttons demonstrate changing this:
- Some other tags can be used in place of
<DIV>. The most useful of which is possibly a table cell (
<th>) or a
<span>which can be assigned an ID and have its innerHTML updated.
- The example above use buttons, but there is no reason why links cannot
be used. This
is an example, for which the HTML is:
<a href="#self" onclick="document.getElementById('DivExample').innerHTML = '<p>You clicked on a link</p>';">This is an example</a>
Inline frames (
<IFRAME>) provides another way of dynamically
controlling what is loaded and displayed. An inline frame allows another file to
be displayed at that point. The main disadvantages of using inline frames is
that not all browsers support them (particularly older browser versions). Also
the size of the frame must be specified, it will not dynamically resize to suit
The HTML to include an inline frame is simply:
Any html between the <iframe> and </iframe> will be visible if the browser does not support inline frames. The <iframe> takes a number of other parameters, such as:
|frameborder||yes or no||Whether the inline frame should have a border.|
|height||number or percentage||The height of the frame in pixels or as a percentage of the available height.|
|scrolling||yes, no or auto||Whether scroll bars are provided. The default is auto.|
|src||file name||The name of the html file to include an display at that point.|
|width||number or percentage||The width of the frame in pixels or as a percentage of the available width.|
It is the 'src' parameter that is of interest here. To change it dynamically either:
Note, the alternative:
works with Internet Explorer but not with Netscape (version 6).
Because the <DIV> tag allows all of the HTML contained within the tag to be replaced, it is therefore possible to replace the content with an inline-frame.