| home / programming / javascript / designing / chap6 / 1 |   [previous] |
|
|
|
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. |
|
| |
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.]
| home / programming / javascript / designing / chap6 / 1 | [previous] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: December 12, 2001
Revised: December 12, 2001
URL: http://webreference.com/programming/javascript/designing/chap6/1/4.html
