DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum VIIIa (v3.08a) | 2 | WebReference

DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum VIIIa (v3.08a) | 2

Logo

Hierarchical Menus Ver. 3 - Addendum VIIIa (v3.08a)
old-but-not-forgotten Navigator versions


The Problem

From time to time we've received mail about the HM script not working in Navigator 4.0 - 4.01a, the first three releases of Netscape's DHTML browser. The complaint was usually voiced as: "it tries to load the scripts and hangs." In all honesty, we attributed the behavior to "old support" and filed it.

We are now getting version 4 of the HM ready, so a check through all browser versions and platforms was mandatory.

Yes, the old versions of Navigator for Windows (fine on the Mac) indeed looked like they were trying to load the scripts to no avail. A little debug code and the problem was isolated.

The HM script itself, (hierMenus.js), does not pose any difficulties for the browsers. It is our conditional loading script that confuses them:

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
if (isMenu) {
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierArrays.js' TYPE='text/javascript'><\/SCRIPT>");
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierMenus.js' TYPE='text/javascript'><\/SCRIPT>");
}
//-->
</SCRIPT>

In all other versions, and in IE, the second document.write is executed after the SCRIPT in the first document.write has loaded. This is the expected behavior, and vital to our technique.

The old Navigator versions execute the second document.write immediately after the first document.write, while the first SCRIPT is still loading. Ouch! You can imagine the confusion for the script engine.

The Solution

Obviously the best way to load the two external scripts is without document.write:

<SCRIPT LANGUAGE="JavaScript1.2" SRC="hierArrays.js" TYPE="text/javascript"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="hierMenus.js" TYPE="text/javascript"></SCRIPT>

Unfortunately, we can only use the above method in controlled environments. Remember, due to a problem with Navigator 3...

All external script files not meant for Navigator 3, but included in a web page accessible by Navigator 3, should be loaded indirectly.

We've discussed the Navigator 3 problem and our document.write solution in DHTML Diner.

We must therefore load the two external files indirectly, with document.write, but avoid the load overlap. This is achieved by loading one file at a time in this way:

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
if (isMenu) {
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierArrays.js' TYPE='text/javascript'><\/SCRIPT>");
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
if (isMenu) {
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierMenus.js' TYPE='text/javascript'><\/SCRIPT>");
}
//-->
</SCRIPT>

I know, it's extremely ugly. The syntax sends shivers down my spine, but it makes the HM immediately accessible by those users who have yet to update their browser.

And we can add a couple of tick marks to our HM Compatibility table!

Since we are fiddling with the in-page script, let's add one more modification to enable compatibility with Active Server Pages.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Nov 17, 1999
Revised: Nov 18, 1999

URL: http://www.webreference.com/dhtml/column21/addendum8a/col21addVIIIa2.html