Until one browser remains standing on the web (if ever), browser
will continue to be part of any good JavaScripter’s life. Whether
gliding a div across the screen or creating an image rollover, it’s
fundamental that only relevant browsers pick up on your code. In
tutorial we’ll probe the navigator object of JavaScript, and show
how to use
it to perform browser detection, whether the subject is Firefox, Internet
Explorer 7, Opera, etc.

The navigator object

The navigator object was conceived back in the
days when
Netscape Navigator reined supreme. These days it serves as much as
irony of NS’s diminished market share as way of probing browser

The navigator object of JavaScript contains the
core properties:

Properties Description
appCodeName The code name of the browser.
appName The name of the browser (ie: <a id="KonaLink1" target="undefined" class="kLink" style="text-decoration: underline ! important; position: static;" href="http://www.javascriptkit.com/javatutors/navigator.shtml#"><font style="color: blue ! important; font-family: monospace; font-weight: 400; font-size: 12px; position: static;" color="blue"><span style="color: blue ! important; font-family: monospace; font-weight: 400; font-size: 12px; position: relative;">Microsoft</span></font></a>            Internet Explorer).
appVersion Version information for the browser
(ie: 4.75 [en] (Win98; U)).
cookieEnabled Boolean that indicates whether the browser
cookies enabled.
language Returns the default language of the
browser version (ie: en-US). NS and Firefox
mimeTypes[] An array of all MIME types supported
by the client. NS and Firefox only.
platform[] The platform of the client’s computer
(ie: Win32).
plugins An array of all plug-ins currently
installed on the client. NS and Firefox only.
systemLanguage Returns the default language of the operating system
(ie: en-us). IE only.
userAgent String passed by browser as user-agent
header. (ie: Mozilla/4.0 (compatible; MSIE 6.0;            Windows NT 5.1))
userLanguage Returns the preferred language setting of
the user
(ie: en-ca). IE only.

Let’s see exactly what these properties reveal of
browser you’re currently using:

appCodeName: Mozilla
appName: Netscape
5.0 (Windows; zh-CN)
userAgent: Mozilla/5.0 (Windows; U;
Windows NT 6.1; zh-CN; rv: Gecko/20100401 Firefox/3.6.3

At a

At a glance at the above table, you may be swayed
turning to the following two properties to do your browser detection


After all, you are trying to detect a browser’s
name and
version right? However, they both will most likely mislead you. In
browsers such as various versions of Netscape and Firefox, these two
properties return simply “Netscape” for appName, and 5.0
for appVersion without any further distinction for
and its version, and hence are pretty much useless in the real world.
For example, in both Firefox 1.x and Firefox 2.x, these two properties

We need to turn to a property that’s more thorough
in its
investigative work if we want more consistency and accuracy, and that
turns out to be navigator.userAgent.

Detecting Firefox x.x

In Firefox for example,
the userAgent property reads:

UserAgent: Mozilla/5.0
U; Windows NT 5.1; en-US; rv: Gecko/20080311 Firefox/

The detail we’re interested in apparently lies at
the very
end, or Firefox/ Different versions of Firefox
contain a different version number, but the pattern is consistent
The part we’re interested in occurs after the string “ Firefox/”,
or the exact version number. There are many ways to get to it using
standard String
or RegExp
methods- I’m opting for the later here:

<script type=”text/javascript”>

if (/Firefox[“/”s](“d+”.”d+)/.test(navigator.userAgent)){ //test for
Firefox/x.x or Firefox x.x (ignoring remaining digits);
 var ffversion=new Number(RegExp.$1) // capture x.x portion and store
a number
 if (ffversion>=3)
  document.write(“You’re using FF 3.x or above”)
 else if (ffversion>=2)
  document.write(“You’re using FF 2.x”)
 else if (ffversion>=1)
  document.write(“You’re using FF 1.x”)



You’re using FF 3.x or above

Basically, I’m capturing just the versonMajor.versionMinor
portion of the full version number of Firefox (ie: becomes
simply 2.0), and using that as basis to detect the various versions of
Firefox. Delving any deeper, and the returned version may no longer be
number but a string (ie: 2.0.0), which makes numeric comparisons

Detecting IE x.x

In IE 7.0 for example,
the userAgent property reads:

UserAgent: Mozilla/4.0
(compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

So the part we’re interested in lies in the
middle, or
MSIE 7.0;. If you try a shortcut and use <a href="http://www.javascriptkit.com/jsref/globalfunctions.shtml">parseFloat</a>
on the entire string to get to the 7.0 portion, it won’t
work. This
is due to the way parseFloat works- by returning the
first number it
encounters, which in this case is 4.0. Once again we need to use
methods again to get to the actual version number; below
using RegExp as well:



Detecting Opera x.x

Detecting Opera using the navigator
object at
first appears to be tricky business due to the browser’s identity
crisis. You see, Opera 8 and below by default identifies itself as IE6
(or lower) in the navigator object. Users can override
setting under “Edit Site Settings” in the toolbar to identify as
Opera or even another browser instead. Starting in Opera 9, the
regains its confidence and identifies by default as itself, Opera,
though users can still modify this setting manually in the toolbar.
bottom line is, Opera can appear as either Opera, Internet Explorer,
another browser within a designated list in the navigator

Lets take a
look at what navigator.userAgent in Opera 8.5 returns
depending on what it has chosen to identify itself as (whether
automatically or manually):

As IE6: Mozilla/4.0 (compatible; MSIE
6.0; Windows XP) Opera 8.5
As Moz5: Mozilla/5.0 (Windows XP;
U) Opera 8.5 [en]
As Opera: Opera/8.5 (Windows
XP; U) [en]

Notice how if it’s set to identify as IE, MSIE 6.0
within the string, while if set to identify as Mozilla, Mozilla/5.0 appears instead. As Opera itself, Opera/8.5
appears. In all three cases, the one commonality that we can exploit
actually detect Opera and its true version regardless of which
it’s decided to take on is the string “ Opera x.x” or “ Opera/x.x
within navigator.userAgent. In other words, there are two
versions of the target string we need to be aware of. With that said,
here’s how you might go about testing for a specific version of Opera,
which turns out to be no different than the technique used for
detecting, say, Firefox:

//Note: userAgent in Opera9.24 WinXP returns: Opera/9.24 (Windows NT
5.1; U;
//         userAgent in Opera
8.5 (identified as IE) returns: Mozilla/4.0 (compatible; MSIE 6.0;
NT 5.1) Opera 8.50 [en]
//         userAgent in Opera
8.5 (identified as Opera) returns: Opera/8.50 (Windows NT 5.1; U) [en]

if (/Opera[“/”s](“d+”.”d+)/.test(navigator.userAgent)){ //test for
or Opera x.x (ignoring remaining decimal places);
 var oprversion=new Number(RegExp.$1) // capture x.x portion and store
as a
 if (oprversion>=10)
  document.write(“You’re using Opera 10.x or above”)
 else if (oprversion>=9)
  document.write(“You’re using Opera 9.x”)
 else if (oprversion>=8)
  document.write(“You’re using Opera 8.x”)
 else if (oprversion>=7)
  document.write(“You’re using Opera 7.x”)




We’ve seen how to use navigator to detect the
browser type
of your visitors. If the potential pitfalls and complexity of
usage of it
is a little too much for you, an alternative is to use
Object Detection
. Whichever method you choose, just be
sure to
choose one!

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注