How to Detect Chrome and Safari Browser (Webkit)

How to detect chrome and safari browser (webkit)

If you dont want to use $.browser, take a look at case 1, otherwise maybe case 2 and 3 can help you just to get informed because it is not recommended to use $.browser (the user agent can be spoofed using this). An alternative can be using jQuery.support that will detect feature support and not agent info.

But...

If you insist on getting browser type (just Chrome or Safari) but not using $.browser, case 1 is what you looking for...

---

This fits your requirement:

Case 1: (No jQuery and no $.browser, just javascript)

Live Demo: http://jsfiddle.net/oscarj24/DJ349/

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);

if (isChrome) alert("You are using Chrome!");
if (isSafari) alert("You are using Safari!");

---

These cases I used in times before and worked well but they are not recommended...

Case 2: (Using jQuery and $.browser, this one is tricky)

Live Demo: http://jsfiddle.net/oscarj24/gNENk/

$(document).ready(function(){

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

    /* Detect Chrome */
    if($.browser.chrome){
        /* Do something for Chrome at this point */
        /* Finally, if it is Chrome then jQuery thinks it's 
           Safari so we have to tell it isn't */
        $.browser.safari = false;
    }

    /* Detect Safari */
    if($.browser.safari){
        /* Do something for Safari */
    }

});

Case 3: (Using jQuery and $.browser, "elegant" solution)

Live Demo: http://jsfiddle.net/oscarj24/uJuEU/

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

if ($.browser.chrome) alert("You are using Chrome!");
if ($.browser.safari) alert("You are using Safari!");

How to detect Safari, Chrome, IE, Firefox and Opera browsers?

Googling for browser reliable detection often results in checking the User agent string. This method is not reliable, because it's trivial to spoof this value.

I've written a method to detect browsers by duck-typing.

Only use the browser detection method if it's truly necessary, such as showing browser-specific instructions to install an extension. Use feature detection when possible.

Demo: https://jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

Detect Safari browser

You can easily use index of Chrome to filter out Chrome:

var ua = navigator.userAgent.toLowerCase(); 
if (ua.indexOf('safari') != -1) { 
  if (ua.indexOf('chrome') > -1) {
    alert("1") // Chrome
  } else {
    alert("2") // Safari
  }
}

Detect webkit browser in javascript?

The basic of them all is this: w3school JS.

Code:

<script>  
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";  
txt+= "<p>Browser Name: " + navigator.appName + "</p>";  
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";  
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";  
txt+= "<p>Platform: " + navigator.platform + "</p>";  
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";  
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";  
document.getElementById("example").innerHTML=txt;  
</script>

But this is not sure about -webkit-.

Here is a fiddle for that, I mean a fiddle for the -webkit- browser alert! (For Chrome, Safari only; Opera 15+ not supported yet!) jsfiddle.

Here is a jQuery code, for this! try this:

$(document).ready(function(){

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

    /* Detect Chrome */
    if($.browser.chrome){
        /* Do something for Chrome at this point */
        /* Finally, if it is Chrome then jQuery thinks it's 
           Safari so we have to tell it isn't */
        $.browser.safari = false;
    }

    /* Detect Safari */
    if($.browser.safari){
        /* Do something for Safari */
    }

});

This will show a popup, as soon as the windows loads!

The best and easy and readable solution would be this:

$.browser.chrome = $.browser.webkit && !!window.chrome;  
$.browser.safari = $.browser.webkit && !window.chrome;  
if ($.browser.chrome) alert("You are using Chrome!");  
if ($.browser.safari) alert("You are using Safari!");

These were the basics, that I found on some sites:

1. w3schools.com
2. stackoverflow (I used this site to find fiddles.

How detect Safari browser ONLY on desktop?

const uA = navigator.userAgent;
const vendor = navigator.vendor;
if (/Safari/i.test(uA) && /Apple Computer/.test(vendor) && !/Mobi|Android/i.test(uA)) {
  //Desktop Safari
}

Distinguish Chrome from Safari using jQuery.browser

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;
}

Chrome is detected as Safari with javascript

Chrome has both 'Chrome' and 'Safari' inside userAgent string. Safari has only 'Safari'.

So this works:

var is_chrome = navigator.userAgent.indexOf('Chrome') > -1; 
var is_explorer = navigator.userAgent.indexOf('MSIE') > -1; 
var is_firefox = navigator.userAgent.indexOf('Firefox') > -1; 
var is_safari = navigator.userAgent.indexOf("Safari") > -1; 
var is_Opera = navigator.userAgent.indexOf("Presto") > -1; 
if ((is_chrome)&&(is_safari)) {is_safari=false;} 

if (is_safari) alert('Safari');

Or for Safari only, use this :

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {alert('Its Safari');} 

Credit: Kabamaru

Browser Detection on iOS

I just decided to go with this regular expression:
https://coderwall.com/p/ktrbhq/detect-mobile-safari

Anyway, I don't like this solution. A better approach is much appreciated.

---

Related Topics