Best IT Recipes

Safari Browser Detection

How to define a Safari browser using JavaScript? I tried the code below and it detects not only Safari, but also the Chrome browser.

function IsSafari() { var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1; return is_safari; }
+111
javascript browser-detection
Oct 30 2018-11-11T00:
source share
16 answers

You can easily use the Chrome index to filter Chrome:

 var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf('safari') != -1) { if (ua.indexOf('chrome') > -1) { alert("1") // Chrome } else { alert("2") // Safari } }
+92
Oct 30 '11 at 10:48
source share

Note. always try to identify the specific behavior you are trying to fix, instead of targeting it with isSafari?

As a last resort, it detects Safari with this regular expression:

 var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

It uses a negative appearance and excludes Chrome, Edge, and all Android browsers that include the Safari name in their user agent.

+126
May 7 '14 at 16:01
source share

As other people have already pointed out, feature detection is preferable to checking a specific browser. One reason is that the user agent string can be changed. Another reason is that the line may change and break your code in newer versions.

If you still want to do this and test any version of Safari, I would recommend using this

 var isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && navigator.userAgent.indexOf('CriOS') == -1 && navigator.userAgent.indexOf('FxiOS') == -1;

This will work with any version of Safari on all devices: Mac, iPhone, iPod, iPad.

Edit

To check in your current browser: https://jsfiddle.net/j5hgcbm2/

Edit 2

Updated according to Chrome docs to correctly detect Chrome on iOS

It is worth noting that all browsers on iOS are just wrappers for Safari and use the same engine. See Bfred.it comment on his own answer in this thread.

Edit 3

Updated according to Firefox docs to correctly detect Firefox on iOS

+75
Jul 30 '15 at 19:20
source share

Just use:

 var isSafari = window.safari !== undefined; if (isSafari) console.log("Safari, yeah!");
+36
Feb 12 '17 at 15:34
source share

This code is used to detect only the Safari browser.

 if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) { alert("Browser is Safari"); }
+18
Apr 22 '14 at 5:34
source share

Since the userAgent for chrome and safari is almost the same, it's easier to look at the browser provider.

Safari

 navigator.vendor == "Apple Computer, Inc."

Chrome

 navigator.vendor == "Google Inc."

Firefox (why is it empty?)

 navigator.vendor == ""

IE (why is it undefined?)

 navigator.vendor == undefined
+9
Dec 01 '16 at 22:06
source share

Safari for Chrome only:

After checking other codes, I did not find anything that works with new and old versions of Safari.

Finally, I made this code that works very well for me:

 var ua = navigator.userAgent.toLowerCase(); var isSafari = false; try { isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification); } catch(err) {} isSafari = (isSafari || ((ua.indexOf('safari') != -1)&& (!(ua.indexOf('chrome')!= -1) && (ua.indexOf('version/')!= -1)))); //test if (isSafari) { //Code for Safari Browser (Desktop and Mobile) document.getElementById('idbody').innerHTML = "This is Safari!"; } else { document.getElementById('idbody').innerHTML = "Not is Safari!"; } 
 <body id="idbody"> </body>
+6
Mar 02 '17 at 18:02
source share

I don’t know why the OP wanted to detect Safari, but in the rare case you need to sniff the browser these days, which is probably more important to determine the rendering mechanism than the browser name. For example, in iOS, all browsers use the Safari / Webkit engine, so it makes no sense to get "chrome" or "firefox" as the browser name if the underlying rendering is actually Safari / Webkit. I have not tested this code with old browsers, but it works with everything that was quite recently on Android, iOS, OS X, Windows and Linux.

 <script> let browserName = ""; if(navigator.vendor.match(/google/i)) { browserName = 'chrome/blink'; } else if(navigator.vendor.match(/apple/i)) { browserName = 'safari/webkit'; } else if(navigator.userAgent.match(/firefox\//i)) { browserName = 'firefox/gecko'; } else if(navigator.userAgent.match(/edge\//i)) { browserName = 'edge/edgehtml'; } else if(navigator.userAgent.match(/trident\//i)) { browserName = 'ie/trident'; } else { browserName = navigator.userAgent + "\n" + navigator.vendor; } alert(browserName); </script>

To clarify:

  • All browsers for iOS will be displayed as "safari / webkit",
  • All browsers are Android, but Firefox will display as "chrome / blink",
  • Chrome, Opera, Blisk, Vivaldi, etc. Will display as "chrome / blink" under Windows, OS X or Linux
+4
Sep 21 '18 at 14:25
source share

I use this

 function getBrowserName() { var name = "Unknown"; if(navigator.userAgent.indexOf("MSIE")!=-1){ name = "MSIE"; } else if(navigator.userAgent.indexOf("Firefox")!=-1){ name = "Firefox"; } else if(navigator.userAgent.indexOf("Opera")!=-1){ name = "Opera"; } else if(navigator.userAgent.indexOf("Chrome") != -1){ name = "Chrome"; } else if(navigator.userAgent.indexOf("Safari")!=-1){ name = "Safari"; } return name; } if( getBrowserName() == "Safari" ){ alert("You are using Safari"); }else{ alert("You are surfing on " + getBrowserName(name)); }
+3
Jun 20 '16 at 4:26
source share

I know this question is out of date, but I was still thinking about posting the answer, as this might help someone. The above solutions failed in some cases, so we had to implement it in such a way as to handle iOS, Desktop and other platforms separately.

 function isSafari() { var ua = window.navigator.userAgent; var iOS = !!ua.match(/iP(ad|od|hone)/i); var hasSafariInUa = !!ua.match(/Safari/i); var noOtherBrowsersInUa = !ua.match(/Chrome|CriOS|OPiOS|mercury|FxiOS|Firefox/i) var result = false; if(iOS) { //detecting Safari in IOS mobile browsers var webkit = !!ua.match(/WebKit/i); result = webkit && hasSafariInUa && noOtherBrowsersInUa } else if(window.safari !== undefined){ //detecting Safari in Desktop Browsers result = true; } else { // detecting Safari in other platforms result = hasSafariInUa && noOtherBrowsersInUa } return result; }
+2
May 08 '18 at 1:22
source share

I noticed that only one word distinguishes Safari - "Version". So this regex will work perfectly:

 /.*Version.*Safari.*/.test(navigator.userAgent)
+2
May 8 '18 at 12:36
source share

Modified regex for answer above

 var isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(navigator.userAgent);
  • crios - Chrome
  • fxios - Firefox
+1
Nov 07 '16 at 10:36
source share

This unique “problem” 100% means that the browser is Safari (believe it or not).

 if (Object.getOwnPropertyDescriptor(Document.prototype, 'cookie').descriptor === false) { console.log('Hello Safari!'); }

This means that the cookie descriptor is set to false in Safari and true on the other, which actually gives me a headache in another project. Happy coding!

+1
May 19 '18 at 22:39
source share

Maybe this works:

 Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor')

EDIT: WITHOUT LONG WORK

0
May 27 '16 at 18:28
source share

For entries, the safest way I found is to implement part of Safari code to determine the browser from this answer :

 const isSafari = window['safari'] && safari.pushNotification && safari.pushNotification.toString() === '[object SafariRemoteNotification]';

Of course, the best way to solve browser-related problems is always to detect functions, if at all possible. However, using code like the one above is still better than defining an agent string.

0
Aug 13 '19 at 7:50
source share

The simplest answer:

 function isSafari() { if (navigator.vendor.match(/[Aa]+pple/g).length > 0 ) return true; return false; }
0
Sep 04 '19 at 7:37
source share


More articles:


All Articles