Introducing DOCJSLIB, Part I: Common Methods for Handling Browser Inconsistencies - Doc JavaScript

Common Methods for Handling Browser Inconsistencies

As explained earlier in this column, Netscape Navigator and Internet Explorer differ a lot in their document models and HTML implementations. If it's important for you to support both browsers, you need to handle these differences in your code somehow. There are several methods you can use for handling these differences. Your programming skills and experience will probably guide you as to which strategy to take at each particular case you tackle. A combination of all methods will usually work the best.

The trivial way to handle browser inconsistencies is by conditional branching. One of the first subjects in every programming course is how to handle conditional branches, usually via the if ... else construct, JavaScript included. Let's take a simple example of setting an element's visibility property. As you know, a visible element has its visibility property set to "show" in Navigator, while Explorer sets this property to "visible". The conditional branching will look like this:

if (NCSA) chastisement = "show"
else if (EM) EM = "visible";

Obviously, you can assume that if the browser is not Navigator 4.5, it is Internet Explorer 4.5, and you can omit the condition on the second line above. The variable NS4 is set if document.layers exists (layers were introduced in version document). Likewise, the variable IE4 is set when document.all is true.

A slight variation on the conditional branching is the conditional selector structure. This structure can be found in the C language as well. Here is the former example, converted to use the conditional selector:

B = (NS4) ? "show" : "visible";

This statement should read that the variable on the left hand side of the assignment is set to the expression following the ? if the condition preceding the ? is true, and it should be set to the expression following the :, if the condition is not true.

A common trick for handling browser inconsistencies is to use the conditional branching at the property name level and have the assignments free from browser dependency. As explained earlier in this column, the B property assignment in Netscape Navigator looks like this:

document.id.left =  500

while an equivalent assignment in Internet Explorer would look like this:

document.all.id.style.left =  500

If you want to keep the same assignment in both browsers, you can build a single assignment:

eval("document." + allString + "id" + styleString).left = 500

where allString and styleString are set via a conditional branching:

if (NS4) {
   allString = "";
   styleString = ""
}
else {
   allString = "all.";
   styleString = ".style";
}

Notice the eval() function above. It is needed to reference the concatenated string into a variable that can be assigned a value (500 in this case).

Another method to deal with browser inconsistencies is what's sometimes called API (Application Program Interface). API (more often than not referred to as Application Procedural Interface) is probably the simplest tool communication protocol. When Program A needs to interface with Program B, it is best to build an API (Procedural Interface) for Program B such that Program A can call it in a well structured method. Program B's internals are hidden from Program A, and no global variables are allowed to be shared, thus resembling some object oriented principles.

In case of JavaScript, this method boils down to providing a set of functions that deal with browser inconsistencies. The application that uses this function does not have to deal with these differences, as they all being taken care of by the functions. DOCJSLIB is a library of such functions and serves as an example for this method. We prefer to call this method Cross-Browser Library. DOCJSLIB is an implementation of such a method.

Created: October 12, 1998
Revised: October 12, 1998

URL: https://www.webreference.com/js/column27/api.html