Blog

How to Detect Browser (and browser version) using JavaScript

Tags: , , , ,
You are currently viewing How to Detect Browser (and browser version) using JavaScript
Credits

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>

References

Suggested javascript solutions for browser detection

From jQuery docs

Browser Feature detection solutions