Safari, Chrome, IE, Firefox ve Opera tarayıcılarını nasıl tespit edebilirim?

FF, Chrome, IE, Opera ve Safari için 5 eklenti / uzantı var.

İlgili eklentiyi indirmek için kullanıcı tarayıcısını nasıl tanıyabilir ve yeniden yönlendirebilirim (bir yükleme düğmesine tıklandığında)?

Tarayıcı güvenilir algılaması için Google'da çalışmak genellikle Kullanıcı aracısı dizesinin kontrol edilmesiyle sonuçlanır. Bu yöntem güvenilir değildir , çünkü bu değeri taklit etmek önemsizdir. Ördek yazarak
tarayıcıları algılamak için bir yöntem yazdım .

Tarayıcı algılama yöntemini, yalnızca bir uzantı yüklemek için tarayıcıya özgü talimatları göstermek gibi gerçekten gerekliyse kullanın. Mümkünse özellik algılamayı kullanın.

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' && 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;

Güvenilirlik analizi

Önceki yöntem render motorunun (özelliklerine bağlı -moz-box-sizingve -webkit-transform) tarayıcısını tespit etmek için. Bu önekler sonunda bırakılacak, bu nedenle algılamayı daha da sağlam hale getirmek için tarayıcıya özgü özelliklere geçtim:

• Internet Explorer: JScript'in Koşullu derlemesi (IE9'a kadar) ve document.documentMode.
• Edge: Trident ve Edge tarayıcılarında, Microsoft'un uygulaması yapıcıyı ortaya çıkarır StyleMedia. Trident hariç bizi Edge bırakır.
• Edge (krom bazlı): Kullanıcı aracısı sonuna "Edg / [sürüm]" değerini ekler (ör. "Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, Gecko gibi) Chrome / 80.0.3987.16 Safari / 537.36 Edg / 80.0.361.9 ").
• Firefox: Eklentileri yüklemek için Firefox'un API'sı: InstallTrigger
• Chrome: chromeBelgelenmiş bir chrome.webstorenesne de dahil olmak üzere çeşitli özellikler içeren global nesne.
• Güncelleme 3 chrome.webstoreson sürümlerde kullanımdan kaldırıldı ve tanımlanmadı
• Safari: Yapıcı adında benzersiz bir adlandırma modeli. Bu, listelenen tüm özelliklerin en az dayanıklı yöntemidir ve ne oldu? Safari 9.1.3'te düzeltildi. Bu nedenle SafariRemoteNotification, 7.1 ve sonraki tüm Safarileri 3.0 ve sonrası için kapsayacak şekilde kontrol ediyoruz .
• Opera: window.operayıllardır var, ancak Opera motorunu Blink + V8 (Chromium tarafından kullanılan) ile değiştirdiğinde düşürülecek .
• Güncelleme 1: Opera 15 yayınlandı , UA dizesi Chrome'a ​​benziyor, ancak "OPR" eklendi. Bu sürümde chromenesne tanımlanmıştır (ancak tanımlanmamıştır chrome.webstore). Opera Chrome'u klonlamak için çok uğraştığından, bu amaçla koklama kullanıcı aracısını kullanıyorum.
• Güncelleme 2: Opera 20+ (sürekli yeşil) !!window.opr && opr.addonstespit etmek için kullanılabilir .
• Blink: Google, Chrome 28'i CSS.supports() açtıktan sonra Blink'te tanıtıldı . Elbette, Opera'da kullanılan aynı Blink.

Başarıyla test edildi:

• Firefox 0.8-61
• Chrome 1.0-71
• Opera 8.0-34
• Safari 3.0-10
• IE 6-11
• Kenar - 20-42
• Edge Geliştirme - 80.0.361.9

Kasım 2016'da, 9.1.3 ve üstü Safari tarayıcılarının algılanmasını içerecek şekilde güncellendi

Chrome, firefox IE ve edge ile ilgili en son başarılı testleri güncellemek için Ağustos 2018'de güncellendi.

Ocak 2019'da krom algılamasını düzeltmek için güncellendi (window.chrome.webstore kullanımdan kaldırıldı) ve krom ile ilgili en son başarılı testleri dahil etti.

Aralık 2019'da Chromium algılamasına (@Nimesh yorumuna dayanarak) dayalı Edge eklemek için güncellendi.

Tarayıcı sürümünü kontrol etmek için aşağıdaki yolu deneyebilirsiniz.

    <!DOCTYPE html>
    <html>
    <body>
    <p>What is the name(s) of your browser?</p>
    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>
    <script>

    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 )) //IF IE > 10
    {
      alert('IE'); 
    }  
    else 
    {
       alert('unknown');
    }
    }
    </script>

    </body>
    </html>

Ve sadece IE Tarayıcı sürümünü bilmeniz gerekiyorsa, aşağıdaki kodu takip edebilirsiniz. Bu kod IE6 - IE11 sürümleri için iyi çalışır

<!DOCTYPE html>
<html>
<body>

<p>Click on Try button to check IE Browser version.</p>

<button onclick="getInternetExplorerVersion()">Try it</button>

<p id="demo"></p>

<script>
function getInternetExplorerVersion() {
   var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        var rv = -1;

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer, return version number
        {               

            if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) {
                //For IE 11 >
                if (navigator.appName == 'Netscape') {
                    var ua = navigator.userAgent;
                    var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
                    if (re.exec(ua) != null) {
                        rv = parseFloat(RegExp.$1);
                        alert(rv);
                    }
                }
                else {
                    alert('otherbrowser');
                }
            }
            else {
                //For < IE11
                alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
            }
            return false;
        }}
</script>

</body>
</html>

Bunun için bir lib kullanmak aşırıya kaçabilir biliyorum, ama sadece iplik zenginleştirmek için, bunu yapmanın is.js yolunu kontrol edebilirsiniz :

is.firefox();
is.ie(6);
is.not.safari();

İşte, Aralık 2019'dan itibaren tarayıcı algılamayı işleyen birkaç önemli kitaplık.

Bowser by lancedikson - 4,065 ★ s - Son güncelleme: 2 Eki 2019 - 4.8KB

var result = bowser.getParser(window.navigator.userAgent);
console.log(result);
document.write("You are using " + result.parsedResult.browser.name +
               " v" + result.parsedResult.browser.version + 
               " on " + result.parsedResult.os.name);

<script src="https://unpkg.com/bowser@2.7.0/es5.js"></script>

* Chromium tabanlı Edge'i destekler

Platform.js by bestiejs - 2.550 ★ s - Son güncelleme: 14 Nis 2019 - 5,9KB

console.log(platform);
document.write("You are using " + platform.name +
               " v" + platform.version + 
               " on " + platform.os);

<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js"></script>

jQuery Browser - gabceb - 504 ★ s - Son güncelleme 23 Kasım 2015 - 1.3KB

console.log($.browser)
document.write("You are using " + $.browser.name +
               " v" + $.browser.versionNumber + 
               " on " + $.browser.platform);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>

Detect.js (Arşivlenmiş) - darcyclarke - 522 ★ s - Son güncelleme 26 Eki 2015 - 2.9KB

var result = detect.parse(navigator.userAgent);
console.log(result);
document.write("You are using " + result.browser.family +
               " v" + result.browser.version + 
               " on " + result.os.family);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>

Browser Detect (Arşivlendi) - QuirksMode - Son güncelleme tarihi 14 Kas 2013 - 884B

console.log(BrowserDetect)
document.write("You are using " + BrowserDetect.browser +
               " v" + BrowserDetect.version + 
               " on " + BrowserDetect.OS);

<script src="https://kylemit.github.io/libraries/libraries/BrowserDetect.js"></script>

Önemli Mansiyonlar:

• WhoBrowser - 1.355 ★ s - Son güncelleme 2 Eki 2018
• Modernizr - 23.397 ★ s - Son güncelleme 12 Ocak 2019 - Beslenen bir atı beslemek için, özellik algılama herhangi bir canIuse tarzı soruları sürmelidir . Tarayıcı algılama, yalnızca bireysel görüntüler için özelleştirilmiş görüntüler sağlamak, dosya indirmek veya talimatlar sağlamak içindir.

Daha fazla okuma

• Stack Overflow - JavaScript tarayıcı algılama?
• Yığın Taşması - Bir tarayıcının sürümünü nasıl tespit edebilirsiniz?

Herkes bu yararlı bulursa, Rob W cevap birden çok değişken hakkında yüzen yerine tarayıcı dizesini döndüren bir işleve yaptım . Tarayıcı tekrar tekrar yüklenmeden gerçekten değişemediğinden, bir sonraki işlev çağrıldığında çalışmasını önlemek için sonucu önbelleğe aldım.

/**
 * Gets the browser name or returns an empty string if unknown. 
 * This function also caches the result to provide for any 
 * future calls this function has.
 *
 * @returns {string}
 */
var browser = function() {
    // Return cached result if avalible, else get result then cache it.
    if (browser.prototype._cachedResult)
        return browser.prototype._cachedResult;

    // 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'] || safari.pushNotification);

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

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

    // Chrome 1+
    var isChrome = !!window.chrome && !!window.chrome.webstore;

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

    return browser.prototype._cachedResult =
        isOpera ? 'Opera' :
        isFirefox ? 'Firefox' :
        isSafari ? 'Safari' :
        isChrome ? 'Chrome' :
        isIE ? 'IE' :
        isEdge ? 'Edge' :
        isBlink ? 'Blink' :
        "Don't know";
};

console.log(browser());

Kısa varyant

var browser = (function() {
    var test = function(regexp) {
        return regexp.test(window.navigator.userAgent);
    }
    switch (true) {
        case test(/edg/i): return "edge";
        case test(/opr/i) && (!!window.opr || !!window.opera): return "opera";
        case test(/chrome/i) && !!window.chrome: return "chrome";
        case test(/trident/i): return "ie";
        case test(/firefox/i): return "firefox";
        case test(/safari/i): return "safari";
        default: return "other";
    }
})();
console.log(browser)

İşte Microsoft Edge ve Blink tespiti de dahil olmak üzere Rob'un cevabının 2016'da ayarlanmış bir sürümü:

( değiştir : Rob'un cevabını bu bilgilerle güncelledim.)

// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
isBlink = (isChrome || isOpera) && !!window.CSS;

/* Results: */
console.log("isOpera", isOpera);
console.log("isFirefox", isFirefox);
console.log("isSafari", isSafari);
console.log("isIE", isIE);
console.log("isEdge", isEdge);
console.log("isChrome", isChrome);
console.log("isBlink", isBlink);

Bu yaklaşımın güzelliği, tarayıcı motoru özelliklerine dayanmasıdır, bu nedenle Yandex veya Vivaldi gibi, motorlarını kullandıkları büyük tarayıcılarla pratik olarak uyumlu olan türev tarayıcıları bile kapsar. Bunun istisnası, kullanıcı aracı koklamaya dayanan Opera'dır, ancak bugün (yani, 15 ve üstü) Opera bile kendisi sadece Blink için bir kabuktur.

Farklı tarayıcı hata mesajlarını kullanabilir tryve catchkullanabilirsiniz. IE ve edge karıştırıldı, ancak Rob W'den ördek yazmayı kullandım (bu projeye dayanarak: https://www.khanacademy.org/computer-programming/i-have-opera/2395080328 ).

var getBrowser = function() {        
    try {
        var e;
        var f = e.width;
    } catch(e) {
        var err = e.toString();

        if(err.indexOf("not an object") !== -1) {
            return "safari";
        } else if(err.indexOf("Cannot read") !== -1) {
            return "chrome";
        } else if(err.indexOf("e is undefined") !== -1) {
            return "firefox";
        } else if(err.indexOf("Unable to get property 'width' of undefined or null reference") !== -1) {
            if(!(false || !!document.documentMode) && !!window.StyleMedia) {
                return "edge";
            } else {
                return "IE";
            }
        } else if(err.indexOf("cannot convert e into object") !== -1) {
            return "opera";
        } else {
            return undefined;
        }
    }
};

Herkese teşekkürler. Kod snippet'lerini son tarayıcılarda burada test ettim: Chrome 55, Firefox 50, IE 11 ve Edge 38 ve hepsi için benim için çalışan aşağıdaki kombinasyonu buldum. Eminim geliştirilebilir, ancak kimin ihtiyacı varsa hızlı bir çözümdür:

var browser_name = '';
isIE = /*@cc_on!@*/false || !!document.documentMode;
isEdge = !isIE && !!window.StyleMedia;
if(navigator.userAgent.indexOf("Chrome") != -1 && !isEdge)
{
    browser_name = 'chrome';
}
else if(navigator.userAgent.indexOf("Safari") != -1 && !isEdge)
{
    browser_name = 'safari';
}
else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
{
    browser_name = 'firefox';
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
    browser_name = 'ie';
}
else if(isEdge)
{
    browser_name = 'edge';
}
else 
{
   browser_name = 'other-browser';
}
$('html').addClass(browser_name);

HTML'ye tarayıcının adıyla birlikte bir CSS sınıfı ekler.

Herkes için yararlı olup olmadığını bilmiyorum ama burada TypeScript'i mutlu etmek için bir varyant var.

export function getBrowser() {

// Opera 8.0+
if ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0) {
    return 'opera';
}

// Firefox 1.0+
if (typeof window["InstallTrigger"] !== 'undefined') {
    return 'firefox';
}

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

// Internet Explorer 6-11
if (/*@cc_on!@*/false || !!document["documentMode"]) {
    return 'ie';
}

// Edge 20+
if (!(/*@cc_on!@*/false || !!document["documentMode"]) && !!window["StyleMedia"]) {
    return 'edge';
}

// Chrome 1+
if (!!window["chrome"] && !!window["chrome"].webstore) {
    return 'chrome';
}

// Blink engine detection
if (((!!window["chrome"] && !!window["chrome"].webstore) || ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0)) && !!window["CSS"]) {
    return 'blink';
}

}

Masaüstü ve Mobil Cihazlarda Tarayıcıları Tespit Etme: Edge, Opera, Chrome, Safari, Firefox, IE

@Nimesh kodunda bazı değişiklikler yaptım, şimdi Edge için de çalışıyor ve Opera sorunu düzeltildi:

function getBrowserName() {

    if ( navigator.userAgent.indexOf("Edge") > -1 && navigator.appVersion.indexOf('Edge') > -1 ) {
        return 'Edge';
    }
    else if( navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
    {
        return 'Opera';
    }
    else if( navigator.userAgent.indexOf("Chrome") != -1 )
    {
        return 'Chrome';
    }
    else if( navigator.userAgent.indexOf("Safari") != -1)
    {
        return 'Safari';
    }
    else if( navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
        return 'Firefox';
    }
    else if( ( navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ) ) //IF IE > 10
    {
        return 'IE';
    }  
    else 
    {
        return 'unknown';
    }
}

Teşekkürler @nimesh kullanıcısı: 2063564

Ayrıca, tüm popüler tarayıcılar için çalışan daha az "hacky" yöntemi de vardır. Google, Closure Library'lerine bir tarayıcı kontrolü ekledi . Özellikle, bir göz goog.userAgentve goog.userAgent.product. Bu şekilde, tarayıcıların kendilerini gösterme biçiminde bir şey değişirse de güncel olursunuz (her zaman kapatma derleyicisinin en son sürümünü çalıştırmanız gerekir).

Belirli bir tarayıcının sayısal sürümünün ne olduğunu bilmeniz gerekiyorsa aşağıdaki snippet'i kullanabilirsiniz. Şu anda size Chrome / Chromium / Firefox sürümünü söyleyecek:

var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;

UAParser , userAgent dizesinden tarayıcıyı, motoru, işletim sistemini, CPU'yu ve cihaz türünü / modelini tanımlayan hafif JavaScript Kütüphanelerinden biridir.

Kullanılabilir bir CDN var. Burada, UAParser kullanarak tarayıcı algılamak için bir örnek kod ekledim.

<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>
<script type="text/javascript">
    var parser = new UAParser();
    var result = parser.getResult();
    console.log(result.browser);     // {name: "Chromium", version: "15.0.874.106"}
</script>
</head>
<body>
</body>
</html>

Artık result.browsersayfanızı koşullu olarak programlamak için değerini kullanabilirsiniz .

Kaynak Eğitimi: JavaScript kullanarak tarayıcı, motor, işletim sistemi, CPU ve cihaz nasıl tespit edilir?

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
   'width' : '100%',
   'margin-left' : '0px',
   });
});

Bu hem Rob'un orijinal cevabını hem de Pilau'nun 2016 güncellemesini birleştirir

    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
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 += 'isIE Edge: ' + isEdge + '<br>';
document.body.innerHTML = output;

Burada hangi tarayıcının çalıştığını öğreneceksiniz.

function isValidBrowser(navigator){

            var isChrome =  navigator.indexOf('chrome'),
            isFireFox= navigator.indexOf('firefox'),
            isIE = navigator.indexOf('trident') ,
            isValidChromeVer = parseInt(navigator.substring(isChrome+7, isChrome+8)) >= 4,
            isValidFireForVer = parseInt(navigator.substring(isFireFox+8, isFireFox+9)) >= 3,
            isValidIEVer = parseInt(navigator.substring(isIE+8, isIE+9)) >= 7;

            if((isChrome > -1 && isValidChromeVer){ console.log("Chrome Browser")}

            if(isFireFox > -1 && isValidFireForVer){ console.log("FireFox  Browser")}

            if(isIE > -1 && isValidIEVer)){ console.log("IE Browser")}


        }

Aşağıdaki util yöntemlerini kullanabiliriz

utils.isIE = function () {
        var ver = navigator.userAgent;
        return ver.indexOf("MSIE") !== -1 || ver.indexOf("Trident") !== -1; // need to check for Trident for IE11
    };

    utils.isIE32 = function () {
        return (utils.isIE() && navigator.appVersion.indexOf('Win64') === -1);
    };

    utils.isChrome = function () {
        return (window.chrome);
    };

    utils.isFF64 = function () {
        var agent = navigator.userAgent;
        return (agent.indexOf('Win64') >= 0 && agent.indexOf('Firefox') >= 0);
    };

    utils.isFirefox = function () {
        return (navigator.userAgent.toLowerCase().indexOf('firefox') > -1);
    };

const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)

Basit, tek satırlık JavaScript kodu size tarayıcının adını verecektir:

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}