InformIT: Sams Teach Yourself JavaScript in 24 Hours

Reading Browser Information

In Hour 9, "Working with the Document Object Model," you learned about the various objects (such as window and document) that represent portions of the browser window and the current Web document. JavaScript also includes an object called navigator that you can use to read information about the user's browser.

The navigator object isn't part of the DOM, so you can refer to it directly. It includes a number of properties, each of which tells you something about the browser. These include the following:

navigator.appCodeName is the browser's internal code name, usually Mozilla.
navigator.appName is the browser's name, usually Netscape or Microsoft Internet Explorer.
navigator.appVersion is the version of the browser being used—for example, 4.0(Win95;I).
navigator.userAgent is the user-agent header, a string that the browser sends to the Web server when requesting a Web page. It includes the entire version information, for example Mozilla/4.0(Win95;I).
navigator.language is the language (such as English or Spanish) of the browser. This is stored as a two-letter code, such as "en" for English. This property is supported only by Netscape.
navigator.platform is the computer platform of the current browser. This is a short string, such as Win16 Win32, or MacPPC., You can use this to enable any platform-specific features (for example, ActiveX components).

You will usually use these properties in an if statement. For example, the following statement sends the user to a different URL if the navigator object specifies Netscape 4.x:

if (navigator.userAgent.indexOf("Mozilla/4") == -1)
   window.location="non_netscape.html";

Displaying Browser Information

As an example of how to read the navigator object's properties, Listing 14.1 shows a script that displays a list of the properties and their values for the current browser.

Example 14.1. A script to display information about the browser

<html>
<head>
<title>Browser Information</title>
</head>
<body>
<h1>Browser Information</h1>
<hr>
<p>
The <b>navigator</b> object contains the following information
about the browser you are using.
</p>
<ul>
<script LANGUAGE="JavaScript" type="text/javascript">
document.write("<li><b>Code Name:</b> " + navigator.appCodeName);
document.write("<li><b>App Name:</b> " + navigator.appName);
document.write("<li><b>App Version:</b> " + navigator.appVersion);
document.write("<li><b>User Agent:</b> " + navigator.userAgent);
document.write("<li><b>Language:</b> " + navigator.language);
document.write("<li><b>Platform:</b> " + navigator.platform);
</script>
</ul>
<hr>
</body>
</html>

This script includes a basic HTML document. A script is used within the body of the document to display each of the properties of the navigator object using the document.write statement.

To try this script, load it into the browser of your choice. If you have more than one browser or browser version handy, try it in each one. Netscape 6's display of the script is shown in Figure 14.1.

Figure 14.1 Netscape displays the browser information script.

Dealing with Dishonest Browsers

If you tried the browser information script in Listing 14.1 using one of the latest versions of Internet Explorer, you probably got a surprise. Figure 14.2 shows how Internet Explorer 6.0 displays the script.

Figure 14.2 Internet Explorer displays the browser information script.

There are several unexpected things about this display. First of all, the navigator.language property is listed as undefined. This isn't much of a surprise because this property isn't yet supported by Internet Explorer.

More importantly, you'll notice that the word Mozilla appears in the code name and user agent fields. The full user agent string reads as follows:

Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)

Believe it or not, Microsoft did have a good reason for this. At the height of the browser wars, about the time Netscape 3.0 and IE 3.0 came out, it was becoming common to see "Netscape only" pages. Some Webmasters who used features such as frames and JavaScript set their servers to turn away browsers without Mozilla in their user agent string. The problem with this was that most of these features were also supported by Internet Explorer.

Microsoft solved this problem in IE 4.0 by making IE's user agent read Mozilla, with the word compatible in parentheses. This allows IE users to view those pages, but still includes enough details to tell Web servers which browser was in use.

You've probably already noticed the other problem with Internet Explorer 6.0's User agent string: the portion reading Mozilla/4.0. Not only is IE claiming to be Netscape—it's also masquerading as version 4.0. Why?

As it turns out, this was another effort by Microsoft to stay one step ahead of the browser wars, although this one doesn't make quite as much sense. Since poorly-written scripts were checking specifically for "Mozilla/4" for dynamic HTML pages, Microsoft was concerned that its 5.0 version would fail to run these pages. Since changing it now would only create more confusion, this tradition continues with IE 6.0.

Although these are two interesting episodes in the annals of the browser wars, what does all this mean to you? Well, you'll need to be careful when your scripts are trying to differentiate between IE and Netscape, and between different versions. For example, the following statement was presented earlier in this hour as an example of the navigator properties:

if (navigator.userAgent.indexOf("Mozilla/4") == -1)
   window.location="non_netscape.html";

As it turns out, this statement checks for the string Mozilla/4—which will actually allow either Netscape 4.x or Internet Explorer 4.x, or even IE 5.x. This isn't necessarily a bad thing, but what if you want to look specifically for Netscape 4.0? In that case, you can be more specific:

if (navigator.appName.indexOf("Netscape") == -1
|| navigator.appVersion.indexOf("4.0") == -1)
    window.location="non_netscape.html";

This longer if statement first checks the navigator.appName property, which will contain the appropriate value of Netscape or Microsoft. Next, it checks the navigator.appVersion property. If the name isn't Netscape or the version isn't 4.0, it sends the user to another page.

In conclusion, don't trust the code name or app version properties, and always test your cross-browser scripts with several browsers before you put them online. In the Workshop section of this hour, you'll learn a practical way to check specifically for 5.0 and later browsers.

Supporting Browsers with JavaScript | Next Section

Previous Section