Cross-Browser Objects: Creating a "load on demand" Web Page
April 1, 1998
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
|
eBook library