js browser properties

Testing your Visitor's Browser



The document object dealt with code between the BODY tags. The navigator object is used to reveal information about the browser your visitors are using. Because some browsers can't deal with certain things (like the document.images code we wrote), the navigator object is typically used to help divert these users away from any code that they can't handle.

Two Properties of the navigator object are:

appName
userAgent
Let's use an alert box to test them out. If you don't want to open a new page for this exercise, you can just comment out any old code between SCRIPT tags. Like this:

// document.open()

// document.write("<H1>Hello</H1>")

The two forward slashes mean "please ignore this code". Whether you decide to create a new web page, or use an old one, type this code in the HEAD section of the page:

<SCRIPT LANGUAGE = JavaScript>

alert(navigator.appName)

</SCRIPT>

If you're using Internet Explorer, you'll get this before the page loads:

The Naigator Ap Name in Internet Explorer

Whereas, if you're using Netscape/Mozilla, you'll get this before the page loads:

The Naigator Ap Name in Netscape

Try changing the alert box to this:

<SCRIPT LANGUAGE = JavaScript>

alert("Your Browser is: " + navigator.appName)

</SCRIPT>

The plus sign (+) is used to combine things. Here, we're combining the direct text "Your Browser is:" with whatever value is returned from navigator.appName. Note that the direct text has double quotes surrounding it, and navigator.appName doesn't. Save your work and load the web page again. You should get something like this (in Netscape):

Test the Browser

OK, so we can tell which browser our visitor is using. But there are many different versions of Netscape and Internet Explorer. An early version of Netscape won't be able to do as much as the latest version, and therefore may not be able to run our scripts. If we just use navigator.appName we won't be able to tell if our user has an early version or the latest version.

To solve the problem, we can use navigator.userAgent. Change your alert box to this:

alert(navigator.userAgent)
Now reload your web page.

Internet Explorer will give you something like this:

The User Agent Property

The part that's useful to us is MSIE 5.01. This tells us that our visitor is using Microsoft Internet Explorer version 5.01. Here's the Netscape version:

The User Agent Property for Netscape

The information we're looking for is now on the end: Netscape 6

By using navigator.userAgent we can return all of that text and store it in a variable. We'd then use a JavaScript function to strip out the bit we're looking for. An IF statement is then typically used to execute code depending on what the browser is.