WebReference.com - Part 1 of Chapter 6 from Designing with JavaScript (4/4)

To page 1To page 2current page>
[previous]

Designing with JavaScript, 2nd Edition

To Infinity and Beyond

By now, you should understand the concept behind if statements and how they use browserName and browserVersion. One smart thing to do in your own scripts is to use the "greater than or equal to" operator when checking for the latest browser versions. For example, here's how to check if the browser is Netscape 6 or later:

if (browserName == "Netscape" && browserVersion >= 5) {
    browser = "nn6up"
}

The advantage of this approach is that if you check for Netscape 6 or later, your pages will work with later versions of the Netscape browser, whenever they are released.

Of course, this technique also works with earlier browser versions. Say you need to know if the browser is IE 4 or later. This is easy, as shown in the following if statement:

if (browserName == "Microsoft Internet Explorer" && 
    browserVersion >= 4) {
    browser = "ie4up";
}
  The be-all and end-all of browser detection
 

As you can tell just by looking at Table 6-2, there are lots of nuances to browser detection. Fortunately, there are a number of different browser detection scripts available on the Web, so you don't have to create your own. You can find a very thorough one, along with a helpful discussion of its use, at: http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html.

Running browser-specific code

With this information, we can begin tailoring our pages to fit the needs of the various browsers. Example 6-4 shows the skeleton for an HTML document that detects the browser being used and runs the appropriate JavaScript code for that browser.

<html>
<head>
<title>A Smart Page</title>
<script language="JavaScript">
// Check browser name and version and assign info to variable
var browserName = navigator.appName;
var browserVersion = parseInt(navigator.appVersion);
var browser;
if (browserName == "Netscape" && browserVersion == 5) {
    browser = "nn6";
}
else if (browserName == "Netscape" && browserVersion == 4) {
    browser = "nn4";
}
else if (browserName == "Microsoft Internet Explorer" && 
         browserVersion == 4 && 
         navigator.appVersion.indexOf("MSIE 6.0") != -1) {
    browser = "ie6";  
}
else if (browserName == "Microsoft Internet Explorer" && 
         browserVersion == 4 && 
         navigator.appVersion.indexOf("MSIE 5.5") != -1) {
    browser = "ie55";
}
else if (browserName == "Microsoft Internet Explorer" && 
         browserVersion == 4 && 
         navigator.appVersion.indexOf("MSIE 5.0") != -1) {
    browser = "ie5";
}
else if (browserName == "Microsoft Internet Explorer" 
         && browserVersion == 4) {
    browser = "ie4";
}
// Handle browser-specific code
if (browser == "nn6" || browser == "ie6" || 
    browser == "ie55" || browser == "ie5") {
    // Latest JavaScript code goes here
}
else if (browser == "nn4") {
    // Specific code for Netscape Navigator 4 goes here
}
else if (browser == "ie4") {
    // Specific code for Internet Explorer 4 goes here
}
</script>
</head>
<body>
<!-- This is where standard HTML goes -->
</body>
</html>

Example 6-4: Partial HTML document with version detection

This page has a working knowledge of which browser is being used, so it can use that information to run particular code on specific browsers. Of course, Example 6-4 is just a template (it doesn't display anything), but you may find it useful in your own web pages. In the next section, we'll look at a few specific examples of using browser detection to control particular features on a web page. [To be continued in part 2 -Ed.]


To page 1To page 2current page>
[previous]

Created: December 12, 2001
Revised: December 12, 2001


URL: http://webreference.com/programming/javascript/designing/chap6/1/4.html