 | Web Design in a Nutshell, 2nd Edition |  |
Unlike CGI scripts, which run on the server and don't require any particular intelligence on the part of the browser, JavaScript code is completely dependent on browser support. If you put a script on your page, browsers that don't understand JavaScript won't know what to do with it. As I mentioned earlier, these browsers will interpret the code as straight text, and the result is rather unpleasant.
It's even more unpleasant, however, when your code isn't completely understood by a JavaScript-aware browser. As we've already discussed, different browsers, and different versions of the same browser, support different versions of JavaScript. A poorly written script can generate error messages or even crash a user's browser, which discourages return visits. Fortunately, JavaScript provides ways to target the browsers that understand specific JavaScript elements.
If you have a script that you know works in Netscape 6 and IE 5.5 but doesn't work in older browsers, you may want to check browser versions and serve your script to users of the browsers in which it works, but not to users of older browsers. Using the techniques shown in this section, you can serve different scripts to different browsers. This means you can write different scripts for people using the latest browser versions and for users of the Version 4.0 browsers, for example. And you can also have an HTML-only option for browsers that don't support JavaScript (or have it turned off).
The first step is to check the browser's name and version number and assign that information to variables. The following code puts the name of the browser in a variable called browserName and the version number in a variable called browserVersion. Depending on the name and number in these variables, the variable browser is assigned a value corresponding to the appropriate browser. Thus, if the browser is Netscape 6, browser is set to nn6; if the browser is IE 4, browser is set to ie4. After the browser identity has been assigned to this variable, you can use if/else statements to ensure that only the correct browser tries to run any browser-specific code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
<!--
// Check browser name and number and assign info to variable
browserName = navigator.appName;
browserVersion = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVersion == 5)
browser = "nn6";
else if (browserName == "Netscape" && browserVersion == 4)
browser= "nn4";
else if (browserName == "Netscape" && browserVersion == 3)
browser = "nn3";
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 == "ie55" || browser == "ie5") {
// Latest JavaScript code goes here
}
else if (browser == "nn4") {
// Netscape Navigator 4 specific code goes here
}
else if (browser == "ie4") {
// Internet Explorer 4 specific code goes here
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<!-- Standard HTML code goes here -->
</BODY>
</HTML>In this code, the first if statement checks to see if the browser is Netscape 6, IE 5, or IE 5.5. If the user is running one of these browsers, the JavaScript code in that if statement is executed. If the browser is not Netscape 6, IE 5, or IE 5.5, the code checks for IE 4 or Navigator 4 and runs the appropriate code in either case. If the user is running an even older browser, no script is run. In any case, the body of the HTML document is displayed normally.
There are a lot 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.
As I noted earlier, varying levels of JavaScript support have been built into browsers since Netscape Navigator 2.0. Table 28-2 shows the version of JavaScript supported by the various versions of Internet Explorer and Netscape Navigator on different platforms. You can use this table to plan your site's browser support and update your browser detection scripts.
|
Platform |
Browser |
JavaScript version |
|---|---|---|
|
Windows |
MS IE 5.5 |
1.5 (ECMA 3) |
|
Windows |
MS IE 5.0 |
1.3 (ECMA 2) |
|
Windows |
MS IE 4.0 |
1.2 (ECMA 1) |
|
Windows |
MS IE 3.0 |
1.0 |
|
Windows |
MS IE 2.0 |
Not supported |
|
Windows |
NN 6 |
1.5 (ECMA 3) |
|
Windows |
NN 4.7/4.5 |
1.3 (ECMA 2) |
|
Windows |
NN 4.0 |
1.2 |
|
Windows |
NN 3.0 |
1.1 |
|
Windows |
NN 2.0 |
1.0 |
|
Mac |
MS IE 5.0 |
1.3 (ECMA 2) |
|
Mac |
MS IE 4.0 |
1.2 (ECMA 1) |
|
Mac |
MS IE 3.0 |
1.0 |
|
Mac |
NN 6 |
1.5 (ECMA 3) |
|
Mac |
NN 4.7/4.5 |
1.3 (ECMA 2) |
|
Mac |
NN 4.0 |
1.2 |
|
Mac |
NN 3.0 |
1.1 |
|
Mac |
NN 2.0 |
1.0 |
|
Unix/Linux |
NN 6 |
1.5 (ECMA 3) |
|
Unix/Linux |
NN 4.7/4.5 |
1.3 (ECMA 2) |
|
Unix/Linux |
NN 4.0 |
1.2 |
|
Unix/Linux |
NN 3.0 |
1.1 |
|
Unix/Linux |
NN 2.0 |
|  | |
| 28.3. Sample Scripts |  | 29. Introduction to DHTML |
Copyright © 2002 O'Reilly & Associates. All rights reserved.