Distinguish Chrome from Safari using jQuery.browser

Question

It seems jQuery.browser is able to identify webkit rather easily as of 1.4. But how can I use it to distinguish Chrome from Safari (and visa-versa)?

kingjeffrey · Accepted Answer · 2013-01-24T00:58:05.213

38

Since Sarfraz has not corrected his answer (thank you Sarfraz for pointing me in the correct direction), I will post functioning code here.

var userAgent = navigator.userAgent.toLowerCase(); 
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 

// Is this a version of Chrome?
if($.browser.chrome){
  userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  $.browser.version = userAgent;
  // If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
  $.browser.safari = false;
}

// Is this a version of Safari?
if($.browser.safari){
  userAgent = userAgent.substring(userAgent.indexOf('version/') +8);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  $.browser.version = userAgent;
}

edited Jan 24 '13 at 00:58

answered Jul 29 '10 at 16:20

kingjeffrey

14,894
6
42
47

3

For safari, $.browser.version ends up giving you the version of webkit, not the version of safari. Try userAgent.indexOf('Version/') + 8 instead. – David Aug 24 '11 at 21:37
Also, you could substring until a space character instead of period on the lines that say `userAgent = userAgent.substring(0,userAgent.indexOf('.'));` in order to get full version numbers rather than just the first part of the version number (the Major number). – mkmurray Feb 29 '12 at 00:42
3

@David, you would need to do lowercase `v` in your `'Version/'` string, as earlier in the code the user agent string was lowercased. – mkmurray Feb 29 '12 at 00:43

Vikrant Chaudhary · Answer 2 · 2013-05-27T03:42:46.440

37

Without jQuery

isChrome = function() { 
  return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
}
isSafari = function() {
  return /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
}

With jQuery

(Following will not work with jQuery 1.9 and above as jQuery.browser has been removed from jQuery. See http://api.jquery.com/jQuery.browser/)

$.browser.chrome = $.browser.webkit && !!window.chrome;
$.browser.safari = $.browser.webkit && !window.chrome;

edited May 27 '13 at 03:42

answered Aug 08 '11 at 07:13

Vikrant Chaudhary

11,089
10
53
68

1

first solution is very elegant. – NullVoxPopuli Feb 29 '12 at 19:02
Why !! for chrome what is that mean ? – Jitender Aug 31 '12 at 11:29
It's very sad that $.browser was removed. But how do we detect that since 1.10? I didn't see anything in the API documents. – AGamePlayer Dec 04 '13 at 02:52

score 2 · Answer 3 · answered Apr 24 '12 at 11:40

2

Also for non-JQuery users:

    navigator.userAgent.indexOf('WebKit') + 1 ? 
       ((navigator.vendor || '').indexOf('Apple') + 1 ? /* Safari */ : /* Chrome */)
    : /* not Webkit */

http://jsfiddle.net/HtWag/13/

answered Apr 24 '12 at 11:40

Hugo Stieglitz

55
3

This did the trick for me. It's a bit of a trick to read through if you aren't used to this kind of conditional statement, but you laid it out quite well. Thanks a ton. – Scott M Jul 23 '12 at 20:59

score 2 · Answer 4 · answered Jul 21 '10 at 21:07

2

You can do like:

// Is this a version of Chrome?
if($.browser.chrome){
  userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  version = userAgent;
  // If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
  $.browser.safari = false;
}

// Is this a version of Safari?

if($.browser.safari){
  userAgent = userAgent.substring(userAgent.indexOf('safari/') +7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  version = userAgent;
}

http://api.jquery.com/jQuery.browser/

answered Jul 21 '10 at 21:07

Sarfraz

377,238
77
533
578

uhm -- $.browser.chrome is undefined. and $.browser.safari is true for both chrome and safari – Scott Evernden Jul 21 '10 at 21:19
@sAc, you were close, this should appear before the code you provided: `var userAgent = navigator.userAgent.toLowerCase(); $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); var version = 0;` – kingjeffrey Jul 21 '10 at 21:28
@sAc, also, the `version` variable is unneeded, and should be replaced with `$.browser.version`. – kingjeffrey Jul 22 '10 at 20:13
@sAc, I'd like to accept your answer, as it put me on the right track – but am unable to do so as long as it contains non-operable code. Please edit your answer to correct the errors mentioned above. – kingjeffrey Jul 22 '10 at 20:15
@kingjeffrey: I posted the code from jquery docs for which link is posted in my answer, it was not written by me. And any fixes are already mentioned in these comments :) – Sarfraz Jul 22 '10 at 20:46
@sAc, you pasted a portion of the code that lost significant context. While it pointed me in the right direction, this loss of context cripples the provided code. I'd edit it myself, except I do not allowed by my reputation. – kingjeffrey Jul 23 '10 at 22:05

score 2 · Answer 5 · answered Jul 21 '10 at 21:14

2

/Chrome/.test(navigator.userAgent)

answered Jul 21 '10 at 21:14

Scott Evernden

39,136
15
78
84

score 1 · Answer 6 · answered Feb 12 '15 at 07:13

You can try using this approach as well, it works for me.

    isSafari: function () 
    {
            var isSafari = (navigator.userAgent.indexOf('Safari') != -1
                        && navigator.userAgent.indexOf('Chrome') == -1)

            console.log('IsSafari : ' + isSafari);

            return isSafari;
    },

score 0 · Answer 7 · answered Mar 26 '12 at 07:39

0

window.chrome?$.browser.chrome=!0:($.browser.webkit&&($.browser.safari=!0),$.browser.chrome=!1);

This patch adds $.browser.chrome and also exclude Goolge Chrome detection from $.browser.safari

answered Mar 26 '12 at 07:39

J_z

993
1
9
18

Distinguish Chrome from Safari using jQuery.browser

7 Answers7

Linked