Using the Navigator Object to Detect Client’s Browser in JavaScript

Until one browser remains standing on the web (if ever), browser detection will continue to be part of any good JavaScripter’s life. Whether you’re gliding a div across the screen or creating an image rollover, it’s fundamental that only relevant browsers pick up on your code. In this 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, Opera, etc.

1. The navigator object

The navigator object was conceived back in the days when Netscape Navigator reined supreme. These days it serves as much as an irony of Netscape’s demise as way of probing browser information.

The navigator object of JavaScript contains the following core properties:

Properties Description
appCodeName The code name of the browser.
appName The name of the browser (ie: Microsoft
Internet Explorer
).
appVersion Version information for the browser
(ie: 5.0 (Windows)).
cookieEnabled Boolean that indicates whether the browser has
cookies enabled.
language Returns the default language of the
browser version (ie: en-US). NS and Firefox only.
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/5.0 (compatible; MSIE 9.0; Windows NT
6.1;
)

You can probe the userAgent property for
mobile browsers such as iPhone, iPad, or Android. The following
variable returns true if the user is using one of the following
mobile browsers:

//returns true if user is using one of the following mobile browsers
var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)

userLanguage Returns the preferred language setting of the user
(ie: en-ca). IE only.

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


2. At a glance

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

navigator.appName
navigator.appVersion

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 Firefox and its version, and hence are pretty much useless in the real world. For example, in both Firefox 4.x and Firefox 5.x, these two properties return:

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.


3. Detecting Firefox x.x

In Firefox 2.0.0.13 for example, the userAgent property reads:

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

And in Firefox 5.0:

UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:5.0) Gecko/20100101 Firefox/5.0

The detail we’re interested in apparently lies at the very end, or Firefox/5.0 for example. Different versions of Firefox will contain a different version number, but the pattern is consistent enough. 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 either standard String or RegExp methods- I’m opting for the later here:

Output:

Basically, I’m capturing just the versonMajor.versionMinor portion of the full version number of Firefox (ie: 2.0.0.13 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 a number but a string (ie: 2.0.0), which makes numeric comparisons cumbersome.


4. 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 parseFloat 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 either standard String or RegExp methods again to get to the actual version number; below I’m using RegExp as well:

Output:


5. 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 this setting under "Edit Site Settings" in the toolbar to identify as Opera or even another browser instead. Starting in Opera 9, the browser regains its confidence and identifies by default as itself, Opera, though users can still modify this setting manually in the toolbar. The bottom line is, Opera can appear as either Opera, Internet Explorer, or another browser within a designated list in the navigator object.

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 [en]
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 appears 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 to actually detect Opera and its true version regardless of which identify 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:

Output:

23 thoughts on “Using the Navigator Object to Detect Client’s Browser in JavaScript

  1. Greate pieces. Keep posting such kind of information on your blog.
    Im really impressed by your site.
    Hello there, You’ve performed a great job.
    I’ll definitely digg it and for my part suggest to my friends.
    I’m confident they will be benefited from this website.

  2. Hi there to every body, it’s my first visit of this weblog; this weblog includes awesome
    and truly excellent data designed for readers.

  3. Your method of telling everything in this article is genuinely pleasant,
    every one can simply understand it, Thanks a lot.

  4. Appreciating the dedication you put into youг website ɑnd іn depth іnformation үou offer.
    It’ѕ great to come across a blog every once in a while
    thɑt isn’t the ѕame unwanted rehashed іnformation.
    Grеat read! I’ѵe bookmarked your site and I’m adding yoᥙr RSS feeds
    tо my Google account.

  5. Pretty nice post. I just stumbled upon your blog and wished to say that I’ve really enjoyed browsing your blog posts.
    In any case I’ll be subscribing to your rss feed and
    I hope you write again soon!

  6. This is my first time go to see at here and i am actually
    pleassant to read everthing at single place.

  7. I like the helpful info you provide for your articles.
    I’ll bookmark your blog and take a look at once more here regularly.
    I’m quite certain I’ll be informed plenty of new
    stuff right right here! Good luck for the following!

  8. Useful information. Luccky me I found yyour web site by chance,
    and I’m shocked why this accident did not took place in advance!
    I bookmarked it.

  9. I do not even understand how I finished up here, however
    I believed this publish used to be good. I do not realize who you are however
    certainly you are going to a well-known blogger should you aren’t already.

    Cheers!

  10. When someone writes an article he/she keeps the plan of a user in his/her mind that how a user
    can understand it. Thus that’s why this article is outstdanding.

    Thanks!

  11. Quality content is the key to invite the viewers
    to pay a quick visit the website, that’s what this website is providing.

  12. What’s up to every body, it’s my first pay a visit of this blog; this
    website contains awesome and genuinely fine information in favor
    of readers.

  13. What’s Going down i’m new to this, I stumbled upon this I have found It absolutely useful and it has aided me
    out loads. I am hoping to contribute & aid other customers like its helped me.
    Good job.

  14. I like the helpful info you supply in your articles.
    I’ll bookmark your blog and test once more right here regularly.

    I’m relatively certain I will learn many new stuff right right
    here! Best of luck for the next!

  15. Greetings! I’ve been following your blog for a long time now and finally got the bravery to go ahead and give you a shout out from Kingwood Tx!
    Just wanted to mention keep up the great work!

  16. Wonderful beat ! I wish to apprentice while you amend your website, how could i subscribe for a blog site?
    The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast offered bright clear idea

  17. We wish to thank you again for the wonderful ideas you
    gave Janet when preparing her post-graduate research and, most importantly, with regard to providing the many ideas
    in one blog post. Provided we had been aware of your web-site
    a year ago, we will have been rescued from the unwanted measures we were participating in. Thanks to you.

  18. I was recommended this web site by my cousin. I am
    not sure whether this post is written by him as nobody else know
    such detailed about my trouble. You’re wonderful!
    Thanks!

Comments are closed.