In the second installment of their Javascript series, Helen Bradley and John Hilvert explain how to check the browsers of visitors to your Web site.

When you're using JavaScript on your web site you should make allowances for browsers that do not support JavaScript or which provide incomplete support.

This month's project shows how to find out details about your user's browser and to load different pages depending on which one they're using. This is a procedure you can use not only for your JavaScript routines but if one browser supports certain style sheet functions, frames or Dynamic HTML then you can provide different pages depending on the browser being used. This will also be useful where a user has a JavaScript enabled browser but has JavaScript support disabled.

Details about the current browser being used are stored in various properties of the navigator object, see Javascript jargon box. The JavaScript here reads two of these navigator properties appVersion and appName and stores the information from them in two variables; browserVersion and browserName. It then looks at the contents of these variables to make a determination as to which browser is being used.

The first test is whether the browser is Internet Explorer. The substring method is used to make the test and it returns a portion of the string starting at position 0 in the string (the first character) and not including the character at position 27:

if (browserName.substring(0,27) == "Microsoft Internet Explorer")

If the browser is Internet Explorer then a test is made as to whether it is version 4. From the browserVersion variable, only the first character is needed to actually identify the version, for example 4.0 and 4.01 would be both 'version 4'. So the charAt method is used to extract the first character from the variable browserVersion ie. the character at position 0:

if (browserVersion.charAt(0) == 4)

If the browser is IE4 then the variable pageOption is assigned the value 2. This value will be used later to control which page is displayed on the screen.

If the browser was not IE4 then it tested in a similar way to see if it is Netscape and, if so whether it's version 3 or 4 which, together with IE4, both support JavaScript. If the browser is Netscape 3 the pageOption variable is assigned the value 1 and if it is Netscape 4 the pageOption variable is assigned the value 2.

The distinction drawn here between the two versions of Netscape is purely for demonstration purposes. However you could use it in a situation where a page contains a function which Netscape version 4 supports and version 3 doesn't.

Finally, on the basis of the value of the variable pageOption, a page is loaded. If the value of pageOption is 1 then the page page1.htm is loaded into the current window:

if (pageOption == 1)

self.location="page1.htm";

As soon as this line of code is encountered the browser will cease loading the current page and will locate and load this other page instead.

The 'self' property refers to the current window and the location object is set to the required html file, which must reside in the same directory as the file browser.htm. If it does not, then you will need to provide more detailed path information in the command.

If the browser is not IE4, Netscape 3 or 4 then the page will continue to load and the text in the BODY of the HTML will be displayed on the screen.

The logic of the JavaScript code is this:

if the browser is IE4 or Netscape 3 or 4

take the viewer to another page depending on which of these browsers it is

else if it is any other browser

do nothing

The actual effect of this is that any JavaScript enabled browser (other than IE4 and Netscape 3 or 4) will simply display the text in the BODY of the document because there are no instructions in the code providing for anything else to happen.

This browser checker can be used with any of your Web pages. Remember, when using our code for your own purposes to pay particular attention to the capitalisation of the JavaScript code, otherwise you run the risk of encountering errors.

You only need change the value assigned to the pageOption variable and the html document to be associated with that value and you can send your viewer to any other page.

For example, to send the viewer to page3.htm, if they're using Netscape 4, alter these lines of code:

else if(browserVersion.charAt(0) == 4)

pageOption = 2;

so that the pageOption variable is set to 3, and add another if test:

else if (pageOption == 3)

self.location="page3.htm";

You may have noticed that there is one case that has not been specifically provided for in this example, but which you may want to include instructions to deal with. This is the case of a browser that is neither IE4 nor Netscape 3 or 4 but which supports JavaScript.

In this example it will be treated like any non JavaScript enabled browser or one with JavaScript disabled however you could control it differently. You can do this using the pageOption variable. In the program it was initialised with the value 0 in the command:

pageOption = 0

Any browser that is JavaScript enabled but is not IE4 or either Netscape 3 or 4 will retain the value 0 in the variable pageOption and can be controlled with the command:

if (pageOption == 0)

self.location = place page reference in here;

Webreference tutorial: You'll find an excellent tutorial on the web which uses a slightly different approach to tailoring script for a particular browser. This program does not require a second page to be loaded and instead uses frames in an interesting way which is worth studying if you want to extend your JavaScript knowledge. You'll find this JavaScript tip of the Week tutorial on Webreference's site at:

http://www.webreference.com/javascript/961028/part01.html

These books will be a valuable addition to your library:

For beginners: JavaScript Interactive Course, Waite Group Press

For more accomplished users: Special Edition, Using JavaScript, by M Reynolds and A Wooldridge.