Along with the Document object, each browser window has a Navigator object, which has two properties containing all the information about the sort of browser you're using. These are appName and appVersion.
The application name is appName. If you're using a version of Netscape, and you have this line in your JavaScript:
var the_browser_name = navigator.appName;
Then the_browser_name will be "Netscape." For MSIE, the_browser_name would be "Microsoft Internet Explorer" (each browser company comes up with its own name). So, if you just want to know whether someone's using Netscape or MSIE, use appName.
More information is stored in the appVersion. A sample appVersion is "4.03 [en] (Win95; I)," which is the browser I'm using as I type this very tutorial. It's Netscape version 4.03, English International, for Win95/NT. Whatever. Beyond the version number, you probably won't need all that information. Happily, getting the version number out of this monster string is quite easy: You just grab the first number. The quickest way to do this is with a function called parseFloat(), which pulls the first thing that looks like a decimal number out of the string and returns it:
var the_browser_version = navigator.appVersion;
var the_version_number = parseFloat(the_browser_version);
Unfortunately, this little trick won't work for Internet Explorer 5.0 or later because Microsoft decided to start their appVersion string with the numbers 4.0. Why did they do this? To irk us all! Luckily, except for some crazy IE5 specific stuff, JavaScript is the same in IE5 and IE4, so in general it's ok for your scripts to be a bit misinformed. If you REALLY want to be sure you know what browser someone is using, refer to Dr. Richard Blaylock's browser detector library.
OK, let's do something useful with this information. Click the button below to see an incredibly straightforward use of the Navigator object.
Here are the two relevant functions. Clicking on the button calls browserSizeUp():
function browserSizeUp()
{
var browser = navigator.appName;
var version = versionNumber();
if ((browser == "Netscape" ||
browser == "Microsoft Internet Explorer") && (version >= 4))
{
alert("The browser doctor says: Now that's a pretty fancy browser
you got there!");
} else {
alert("The browser doctor says: Hmm. Maybe it's time to upgrade.");
}
}
function versionNumber() {
// return version number (e.g., 4.03)
return parseFloat(navigator.appVersion)
}
What's happening? If we like the user's browser, we give one alert. We dish up a different alert if we think he or she needs to get modern. In a real-life application, you'd use document.writeln() to generate HTML that's suitable for different browsers.
What users see depends on which browser their using. Unfortunately, with all the different browsers, browser versions, and platforms out there, it's nearly impossible to keep track of which browsers support what features. And it's only going to get worse as the number of browsers grows and the number of features you have to keep track of continues to increase.
Luckily, there's a way to preserve your sanity. Read on and learn
about object and method detection.
next page»
