Uncategorized

How to Detect Browser (and browser version) using JavaScript

Browser (and browser version) detection is an “all time classic” development requirement. jQuery.browser WAS an excellent solution, but it was removed in jQuery 1.9.

Actually, it would be better to try to detect a browser feature instead of browser name itself, where possible. An ideal solution for this is Modernizr (a JavaScript library that detects HTML5 and CSS3 features in the user’s browser).

But, if you still need to detect browser and browser version (using javascript), I suggest the following solutions (among many others): Bowser – A Browser detector and Browser detect provided by quirksmode. I prefer the first one.

Bowser – A Browser detector

Get bowser from https://github.com/ded/bowser. Add it to your document with something like this (change /url/to/… with the real url):

<script type="text/javascript" src="/url/to/bowser.min.js"></script>

Code

The HTML part

Let’s create these links for demo:

<p>
Click to <a id="detect_browser"
href="javascript:void(0);">Detect browser properties</a>
</p>

<p>
Click to <a id="detect_version"
href="javascript:void(0);">Detect browser version</a>
</p>

The JAVASCRIPT part

Remark: I use jQuery to handle events, but you can use plain javascript (if you prefer).

<script type="text/javascript">

$(function() {

// detect browser properties
$("#detect_browser").click(function() {
alert(JSON.stringify(bowser, null, ' '));
});

// detect browser version
$("#detect_version").click(function() {
alert(bowser.version);
});

});

</script>

If you need help on JSON.stringify, read this post.

References

Suggested javascript solutions for browser detection

From jQuery docs

Browser Feature detection solutions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.