DHTML Lab: Hierarchical Menus Version 3 | 3

Hierarchical Menus: Version 3
avoiding error messages

WebReference

Click the link above to reveal menu. Click anywhere on the page to hide menu.

Parameters used for the menus on this page:

menuVersion = 3;
menuWidth = 120;
childOffset = 5;
perCentOver = 30;
secondsVisible = 1;
fntCol = "black";
fntSiz = "10";
fntBold = true;
fntItal = false;
fntFam = "serif";
backCol = "#F84130";
overCol = "#FF5F4E";
overFnt = "black";
borWid = 2;
borCol = "darkgreen";
borSty = "solid";
itemPad = 3;
imgSrc = "tri.gif";
imgSiz = 10;
separator = 1;
separatorCol =
   "darkgreen";
isFrames = false;
keepHilite = true; 
NSfontOver = false;
clickStart = true;
clickKill = true;
showVisited = "";

The hierarchical menus are, of course, DHTML-based. Which, in turn, makes them HTML-based. They are part of the page they appear in. Our script creates new elements in an already existing page. That is, we modify the page.

Since the menus are positioned elements, they float above other elements, giving the illusion that they are an appendage, or elements external to the page. This is not true. They are as much a part of the page as a <P> or <B> tag is.

When we use menus in a frameset, the page loaded into the main frame is modified by our script. The page is changed.

Both Navigator and Explorer do not allow modification of any page that does not reside on the same server as the page with the script that does the modifying. In other words, if you load a page into the main frame that is not yours, you cannot modify it, and by extension, you cannot make menus appear in that page. It is correct, welcome behavior that increases security.

Those of you who have tried, have seen error messages like these:

sample Navigator access error

sample Explorer access error 1

sample Explorer access error 2

What To Do?

1. Avoid loading foreign pages into your main frame.

Link only to your own pages. If you must have links to foreign pages, version 3 will filter access-related errors and not display them. When the user returns to menu-enabled pages, the menus will rebuild. This code is discussed below.

Alternatively, target all foreign pages to open in a new window, by using a javascript URL in your arrays:
  javascript:window.open(URL)
See column 20 - addendum, for instructions on using javascript URLs.

2. Learn to use the document.domain property.

There may be case where you want to load your own pages which reside on a different server, but under the same domain. For example, your navigation frame page is on: serverone.domain.com and your intended main page is on: servertwo.domain.com. In cases like this, access is allowed if both pages have a common document.domain property. The details are beyond the scope of this article. You may find documentation in the Microsoft SDK:

Frame Scripting Security.
The concepts discussed are cross-browser.

Error Filtering

Both browsers provide an onerror event handler to run a function when a script error occurs. This line will call the handleErr() function when an error is encountered:

window.onerror = handleErr;

Note:
The onerror handler will not fire if it encounters a syntax error in your script. It only fires at runtime, when the script is being executed.

Again, we will not delve into the error handler in detail. You must know two things, however:

1. When the onerror handler fires, it creates three objects, which it passes as arguments to the function called:
   1. the error message
   2. the filename
   3. the script line number
   The error built-in error displays above include these three arguments. We can use the arguments to process the error in our script.
2. If the handler function returns true, then the browser error message does not appear. In the function, of course, we can display our own custom error message.

function handleErr(){
	arAccessErrors = ["permission","access"];
	mess = arguments[0].toLowerCase();
	found = false;
	for (i=0;i<arAccessErrors.length;i++) {
		errStr = arAccessErrors[i];
		if (mess.indexOf(errStr)!=-1) found = true;
	}
	return found;
}

Our version 3 handler function, above, first creates an array of lower-case "keywords" that are contained in the error messages we want to filter. For clarity, we create the array by simply enclosing the list of strings in square array brackets. This is the same as new Array = ().

Next, we create a variable to store the error message, mess, assigning it the value of the first implicitly passed argument. We also convert the error message to lower-case, for easier searching. The found variable is initialized to false.

We then loop through our keyword array searching each error message for a match. If the keyword appears in any error message, found becomes true. If no match is exists, found remains false.

Finally, we return the value of found. If the error message contained either "access" or "permission," we are returning true, in which case the browser error message is not displayed.

Error-capturing is, of course, good material for another article. Here we have discussed the necessary basics.

We wrap up our discussion of version 3 on the next page.