Professional JavaScript For Web Developers

Chapter 8
Methods of Browser Detection
Like most things in JavaScript, a few different forms of browser detection are available. Presently, two
approaches to browser detection are used: object/feature detection and user-agent string detection. Each
approach has its advantages and disadvantages, and you should understand proper usage of each when
you are deploying your Web solution.
Object/feature detection
Object detection (also called feature detection) is a generic way of determining a browser’s capabilities
rather than the exact make and model of a target browser. Most JavaScript experts point to this method
as the most appropriate one to use because they believe it future proofs scripts against changes that might
make it difficult to determine the exact browser being used.
Object detection involves checking to see if a given object exists before using it. For instance, suppose
you want to use the DOM method document.getElementById(), but you aren’t sure if the browser
supports it. You can use the following code:
if (document.getElementById) {
//the method exists, so use it here
} else {
//do something else
}
The previous code checks whether the method exists. You have learned that a property (or method) that
doesn’t exist returns a value of undefined. You may also remember that the value undefined, when
translated into a Boolean, is equal to false. So, if document.getElementById() doesn’t exist, the code
skips to the else clause; otherwise the first set of code is executed.
Note that to check for the existence of a function, you must omit the parentheses. If
you include the parentheses, the interpreter tries to call the function, which causes
an error if the function doesn’t exist.
This method of detection should be used when you are more concerned with the capabilities of the
browser than you are with its actual identity. Throughout the book, you see examples of object detection
used in specific instances, whereas in other instances another method, user-agent string detection is
most appropriate.
User-agent string detection
User-agent string detection is the oldest browser detection method there is. Every program that accesses
a Web site is required to provide a user-agent string identifying itself to the server. Traditionally, this
information was only accessible from the server in the CGI environment variable HTTP_USER_AGENT
(accessed by $ENV{‘HTTP_USER_AGENT’}). However, JavaScript introduced the userAgent property of
the navigator object to provide client-side access to the user-agent string:
var sUserAgent = navigator.userAgent;
226