Cross-Browser Objects: Creating a "load on demand" Web Page

In part 1 of of this 3-part series, I demonstrated how to use JavaScript to create cross-browser objects to handle the differences in Dynamic HTML (DHTML) between Netscape Navigator 4.x and Microsoft Internet Explorer 4.x. In part 2, I used these objects to create an index card-like stack with pre-loaded information. Part 3 uses the cross-browser objects and Netscape's and Microsoft's load "on demand" capabilities to demonstrate loading content from the Web server without reloading the entire page.

Loading content on demand means that the content is not loaded until the Web page reader has initiated some action. Most Web content loads on demand but normally as different pages that don't necessarily have any connectivity to each other. With version 4.0 of each of their respective browsers, both Microsoft and Netscape have provided techniques to load external Web content into an existing Web page. Netscape provides the ability to load content into a CSS-P block or LAYER, and Microsoft provides this ability with the IFRAME, or internal frame, object.

Note that the code discussed in this section work for Netscape Navigator 4.x and Internet Explorer 4.x on Windows 95 or NT, but may not work on other platforms.

Adding the On Demand Objects to the Page

To load Web page content on demand, I needed to add a container for the source to the Web page. As stated earlier, I use a LAYER tag for this purpose for Navigator and an IFRAME for IE. IE ignores the LAYER tag, and Navigator ignores the IFRAME. In addition, the IFRAME object is added within a NOLAYER tag, just to ensure it does not get processed by Navigator. The code to add and position the objects is given in the following code block:

<LAYER name="content" top=20 left=50 height=400
	clip.bottom=400 clip.right=500
	style="visibility:hidden" src="part1.htm">
</LAYER>

<NOLAYER>
<IFRAME id="content"
style="position:absolute; left: 50; top: 20; 
width:500; height:400"  src="part1.htm">
</IFRAME>
</NOLAYER>

To add source to both of these objects, I use the attribute called "src". I preload the first page because the content will not show in Navigator without some action to force a page redraw. I have found that loading the content using the "onLoad" event may or may not actually "paint" the content with Navigator, at least Navigator 4.x. For instance, if I used the change content function, described later, within the onLoad event to load the first of the pages for this demonstration, I found that the first page would not actually show until I clicked one of the buttons. To load the layer source properly, I set the width and height of the layer, but still must call the clipping function to ensure the contents clip accurately.

To load content into the containers, functionality is added to load the next or previous content "pages". To do this, two links are created each of which calls a function to load in the appropriate page. The HTML for these objects is next:

<DIV id="pages" 
style="position: absolute; left: 570; top: 230">
<a href="" onclick="next_page();return false">Next Page</a>
<p>
<a href="" onclick="prev_page();return false">Previous Page</a>
</DIV>

A style setting for the links is also added to ensure that they show well in the page:

<STYLE type="text/css">
   DIV A { font-size: 14pt; font-weight: bold; 
		color: green; text-decoration: none }
</STYLE>

Next up, I add scripting to handle loading the content into the layers. As content for this demonstration, I broke part 2 of this article series into three separate HTML pages. As Netscape and Microsoft use different techniques to load content, code must be added to handle content loading for each browser. To make this loading code reusable, it is added as a new method to WDVL cross-browser objects with a name of objChangeSource. The new method is covered in the next section.

Adding objChangeSource to the Cross-Browser Objects