How can I detect browser type using jQuery?

Question

I want to detect if the user is using IE and Firefox but I cannot find the script.

I have code as below:

$(document).ready(function(e) {
    $.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase()); 
    if($.browser.chrome){
        alert(1);
             //this work well
    }
            else if(//the browser is IE){alert(2);}
            else if(//the browser is Firefox){alert(3);}

   //The problem is that I don't know how to write a script for IE and FireFox browser for chrome is work fine
 )};

If you rely on `$.browser` then surely _you_ don't need to implement browser detection in your code. In either case, consider using feature detection instead. — WynandB, Oct 14 '13 at 04:53
As noted above and on https://api.jquery.com/jquery.browser/, "this property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead." — Meetai.com, Jun 14 '15 at 06:05

score 29 · Accepted Answer · answered Oct 14 '13 at 02:43

29

The best solution is probably: use Modernizr.

However, if you necessarily want to use $.browser property, you can do it using jQuery Migrate plugin (for JQuery >= 1.9 - in earlier versions you can just use it) and then do something like:

if($.browser.chrome) {
   alert(1);
} else if ($.browser.mozilla) {
   alert(2);
} else if ($.browser.msie) {
   alert(3);
}

And if you need for some reason to use navigator.userAgent, then it would be:

$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase()); 
$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());

answered Oct 14 '13 at 02:43

Milosz

511
4
5

Can Modernizr and jQuery Migrate Plugin be used in any of the browsers, like: IE6 and even older browsers, since this is one of the main purposes we use the Browser Detections for. Please kindly suggest. – 夏期劇場 Oct 24 '14 at 02:13
13

$.browser has been removed from all jQuery versions 1.9+ which was released on 2013-01-15. – Bryce Siedschlaw Jan 29 '15 at 00:59
I get this in IE 11, "Unable to get property 'mozilla' of undefined or null reference" – eaglei22 Apr 11 '17 at 13:19
This would mean relying on the jQuery migrate plugin. You would have to keep the plugin for the code to work. I am not sure it is a good practice to make your code dependant on the jQuery migrate utility. In general, I think its main purpose is, or should be, to help you upgrade your code to a newer version of jQuery, rather than making your legacy code work while you use a modern version of jQuery. I think in general programmers should avoid using jQuery migrate beyond the scope of the project of migrating jQuery to a newer version. Once the upgrade is done, jQuery migrate should be removed. – Jaime Montoya Oct 31 '17 at 15:00

András · Answer 2 · 2016-02-05T12:21:42.373

29

My solution for ie detection:

if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ){
    $("html").addClass("ie");
}

Jquery needed.

edited Feb 05 '16 at 12:21

answered Nov 22 '13 at 09:47

András

3,395
1
21
27

This works by detecting all msIE browser versions. Do you have a handy variation to detect only, let's say IE8 and IE9, but not IE7, IE10 or IE11 ? – j4v1 Jul 15 '15 at 19:23
The answer provided requires adding content in html, which I wasn't really contemplating. I did find this other article though: http://tanalin.com/en/articles/ie-version-js/ – j4v1 Jul 16 '15 at 18:30
1

This answer worked best. I didn't have to worry about using a plugin, AND it seems most of the time IE has the issues. So it was best for me to check for IE browsers and handle accordingly. Interestingly, in one of my cases I needed to margin-left 32% for IE, and FF was margin-left -16%.. – eaglei22 Apr 11 '17 at 13:25

score 11 · Answer 3 · answered Oct 20 '18 at 08:19

You can use this code to find correct browser and you can make changes for any target browser.....

function myFunction() { 
        if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ){
            alert('Opera');
        }
        else if(navigator.userAgent.indexOf("Chrome") != -1 ){
            alert('Chrome');
        }
        else if(navigator.userAgent.indexOf("Safari") != -1){
            alert('Safari');
        }
        else if(navigator.userAgent.indexOf("Firefox") != -1 ){
             alert('Firefox');
        }
        else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )){
          alert('IE'); 
        }  
        else{
           alert('unknown');
        }
    }

<!DOCTYPE html>
<html>
<head>
 <title>Browser detector</title>

</head>
<body onload="myFunction()">
// your code here 
</body>
</html>

this throws "Chrome" on Microsoft Edge too, so is not accurate — Pedro Joaquín, Feb 20 '23 at 19:59

xxbbcc · Answer 4 · 2013-10-14T02:16:51.527

You shouldn't write your own browser-detection code - it's been done many times before. Use Modernizr to detect independent browser features instead. It's better to detect the various features than to detect entire browsers because various browsers may support different set of features and those features may even change through various versions of the same browser. If you detect the presence of a given feature, your code will likely work better in more browsers. This is especially true for the various mobile browsers.

When you run Modernizr, it'll update your HEAD element's class attribute so that it lists the various features of the browser that you're using - you can then use Javascript to query the attribute and decide what to do if a feature is present (or missing).

score 5 · Answer 5 · answered Jul 02 '15 at 09:53

Use this:

(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], function ($) {
      return factory($);
    });
  } else if (typeof module === 'object' && typeof module.exports === 'object') {
    // Node-like environment
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals
    factory(window.jQuery);
  }
}(function(jQuery) {
  "use strict";

  function uaMatch( ua ) {
    // If an UA is not provided, default to the current browser UA.
    if ( ua === undefined ) {
      ua = window.navigator.userAgent;
    }
    ua = ua.toLowerCase();

    var match = /(edge)\/([\w.]+)/.exec( ua ) ||
        /(opr)[\/]([\w.]+)/.exec( ua ) ||
        /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
        /(version)(applewebkit)[ \/]([\w.]+).*(safari)[ \/]([\w.]+)/.exec( ua ) ||
        /(webkit)[ \/]([\w.]+).*(version)[ \/]([\w.]+).*(safari)[ \/]([\w.]+)/.exec( ua ) ||
        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
        /(msie) ([\w.]+)/.exec( ua ) ||
        ua.indexOf("trident") >= 0 && /(rv)(?::| )([\w.]+)/.exec( ua ) ||
        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
        [];

    var platform_match = /(ipad)/.exec( ua ) ||
        /(ipod)/.exec( ua ) ||
        /(iphone)/.exec( ua ) ||
        /(kindle)/.exec( ua ) ||
        /(silk)/.exec( ua ) ||
        /(android)/.exec( ua ) ||
        /(windows phone)/.exec( ua ) ||
        /(win)/.exec( ua ) ||
        /(mac)/.exec( ua ) ||
        /(linux)/.exec( ua ) ||
        /(cros)/.exec( ua ) ||
        /(playbook)/.exec( ua ) ||
        /(bb)/.exec( ua ) ||
        /(blackberry)/.exec( ua ) ||
        [];

    var browser = {},
        matched = {
          browser: match[ 5 ] || match[ 3 ] || match[ 1 ] || "",
          version: match[ 2 ] || match[ 4 ] || "0",
          versionNumber: match[ 4 ] || match[ 2 ] || "0",
          platform: platform_match[ 0 ] || ""
        };

    if ( matched.browser ) {
      browser[ matched.browser ] = true;
      browser.version = matched.version;
      browser.versionNumber = parseInt(matched.versionNumber, 10);
    }

    if ( matched.platform ) {
      browser[ matched.platform ] = true;
    }

    // These are all considered mobile platforms, meaning they run a mobile browser
    if ( browser.android || browser.bb || browser.blackberry || browser.ipad || browser.iphone ||
      browser.ipod || browser.kindle || browser.playbook || browser.silk || browser[ "windows phone" ]) {
      browser.mobile = true;
    }

    // These are all considered desktop platforms, meaning they run a desktop browser
    if ( browser.cros || browser.mac || browser.linux || browser.win ) {
      browser.desktop = true;
    }

    // Chrome, Opera 15+ and Safari are webkit based browsers
    if ( browser.chrome || browser.opr || browser.safari ) {
      browser.webkit = true;
    }

    // IE11 has a new token so we will assign it msie to avoid breaking changes
    // IE12 disguises itself as Chrome, but adds a new Edge token.
    if ( browser.rv || browser.edge ) {
      var ie = "msie";

      matched.browser = ie;
      browser[ie] = true;
    }

    // Blackberry browsers are marked as Safari on BlackBerry
    if ( browser.safari && browser.blackberry ) {
      var blackberry = "blackberry";

      matched.browser = blackberry;
      browser[blackberry] = true;
    }

    // Playbook browsers are marked as Safari on Playbook
    if ( browser.safari && browser.playbook ) {
      var playbook = "playbook";

      matched.browser = playbook;
      browser[playbook] = true;
    }

    // BB10 is a newer OS version of BlackBerry
    if ( browser.bb ) {
      var bb = "blackberry";

      matched.browser = bb;
      browser[bb] = true;
    }

    // Opera 15+ are identified as opr
    if ( browser.opr ) {
      var opera = "opera";

      matched.browser = opera;
      browser[opera] = true;
    }

    // Stock Android browsers are marked as Safari on Android.
    if ( browser.safari && browser.android ) {
      var android = "android";

      matched.browser = android;
      browser[android] = true;
    }

    // Kindle browsers are marked as Safari on Kindle
    if ( browser.safari && browser.kindle ) {
      var kindle = "kindle";

      matched.browser = kindle;
      browser[kindle] = true;
    }

     // Kindle Silk browsers are marked as Safari on Kindle
    if ( browser.safari && browser.silk ) {
      var silk = "silk";

      matched.browser = silk;
      browser[silk] = true;
    }

    // Assign the name and platform variable
    browser.name = matched.browser;
    browser.platform = matched.platform;
    return browser;
  }

  // Run the matching process, also assign the function to the returned object
  // for manual, jQuery-free use if desired
  window.jQBrowser = uaMatch( window.navigator.userAgent );
  window.jQBrowser.uaMatch = uaMatch;

  // Only assign to jQuery.browser if jQuery is loaded
  if ( jQuery ) {
    jQuery.browser = window.jQBrowser;
  }

  return window.jQBrowser;
}));

score 1 · Answer 6 · answered Aug 08 '14 at 04:24

1

Try to use it

$(document).ready(function() {
// If the browser type if Mozilla Firefox
if ($.browser.mozilla && $.browser.version >= "1.8" ){ 
// some code
}
// If the browser type is Opera
if( $.browser.opera)
{
// some code
}
// If the web browser type is Safari
if( $.browser.safari )
{
// some code
}
// If the web browser type is Chrome
if( $.browser.chrome)
{
// some code
}
// If the web browser type is Internet Explorer
if ($.browser.msie && $.browser.version <= 6 )
{
// some code
}
//If the web browser type is Internet Explorer 6 and above
if ($.browser.msie && $.browser.version > 6)
{
// some code
}
});

answered Aug 08 '14 at 04:24

cyberoot

340
2
18

what browser do you test @Techy – cyberoot Aug 25 '14 at 06:49
chrome os,I have checked this code inside fiddle also. – Techy Aug 25 '14 at 06:50
7

It's been said a million times before, but $.browser has been removed from all jQuery versions 1.9+ which was released on 2013-01-15 – Bryce Siedschlaw Jan 29 '15 at 01:01

score 1 · Answer 7 · answered Jul 11 '17 at 12:25

$.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase()); 

if($.browser.chrome){
  alert(1);      
}

UPDATE:(10x to @Mr. Bacciagalupe)

jQuery has removed $.browser from 1.9 and their latest release.

But you can still use $.browser as a standalone plugin, found here

Prem · Answer 8 · 2016-04-08T09:16:12.113

Another way to find versions of IE

http://tanalin.com/en/articles/ie-version-js/

IE versions Condition to check for

IE 10 or older -   document.all <BR/> 
IE 9 or older  -   document.all && !window.atob <br/>
IE 8 or older  -   document.all && !document.addEventListener <br/>
IE 7 or older  -   document.all && !document.querySelector <br/>
IE 6 or older  -   document.all && !window.XMLHttpRequest <br/>
IE 5.x         -   document.all && !document.compatMode

score 0 · Answer 9 · answered Nov 16 '18 at 07:52

0

You can get Browser type here:

<script>
    var browser_type = Object.keys($.browser)[0];
    alert(browser_type);
</script>

answered Nov 16 '18 at 07:52

Sandeep Sherpur

2,418
25
27

score 0 · Answer 10 · answered Dec 01 '18 at 07:48

$(document).ready(function(){
    alert('sdfsd');
    checkOperatingSystem();
   });
   function checkOperatingSystem(){
       var  userAgent = navigator.userAgent || navigator.vendor || window.opera;

       
       if (/android/i.test(userAgent)) {
           alert('android');
       }

       
       if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
           alert('ios');
       }

      
       if (navigator.appVersion.indexOf("Win")!=-1)
       {
           
       }

      
       if (navigator.appVersion.indexOf("Mac")!=-1)
       {
           
       }  
   }

score -1 · Answer 11 · answered May 19 '14 at 05:07

-1

I have used this and it works for me.Also include jquery migrate plugin,and jquery file.

if ( $.browser.webkit ) {
alert( "This is WebKit!" );
}

answered May 19 '14 at 05:07

Raza Ul Mustafa

9
1
4

How can I detect browser type using jQuery?

11 Answers11

Linked