Wie erkennt man die Browser Safari, Chrome, IE, Firefox und Opera?

Ich habe 5 Addons/Erweiterungen für Firefox, Chrome, Internet Explorer (IE), Opera und Safari.

Wie kann ich den Browser des Benutzers korrekt erkennen und (nachdem auf eine Schaltfläche zum Installieren geklickt wurde) zum Herunterladen des entsprechenden Add-Ons weiterleiten?

Das Googeln nach einer zuverlässigen Erkennung des Browsers führt häufig zur Überprüfung der Zeichenfolge des Benutzeragenten. Diese Methode ist nicht zuverlässig, weil es trivial ist, diesen Wert zu fälschen.
Ich habe eine Methode geschrieben, um Browser zu erkennen Ententypisierung.

Verwenden Sie die Browser-Erkennungsmethode nur, wenn es wirklich notwendig ist, z. B. um browserspezifische Anweisungen zum Installieren einer Erweiterung anzuzeigen. Verwenden Sie nach Möglichkeit die Merkmalserkennung.

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;

Analyse der Zuverlässigkeit

Die vorherige Methode hing von den Eigenschaften der Rendering-Engine ab (-moz-box-sizing und -webkit-transform), um den Browser zu erkennen. Diese Präfixe werden irgendwann fallen gelassen. Um die Erkennung noch robuster zu machen, habe ich auf browserspezifische Merkmale umgestellt:

• Internet Explorer: JScripts Bedingte Kompilierung (bis IE9) und document.documentMode.
• Edge: In Trident- und Edge-Browsern legt die Microsoft-Implementierung die StyleMedia Konstrukteur. Das Ausschließen von Trident lässt uns mit Edge zurück.
• Edge (basierend auf Chromium): Der User Agent enthält den Wert „Edg/[version]” am Ende (Beispiel: “Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, wie Gecko) Chrome/80.0.3987.16 Safari/537.36 Edg/80.0.361.9“).
• Firefox: Firefox-API zum Installieren von Add-Ons: InstallTrigger
• Chrome: Das globale chrome Objekt, das mehrere Eigenschaften enthält, darunter eine dokumentierte chrome.webstore Objekt.
• Aktualisierung 3 chrome.webstore ist veraltet und in neueren Versionen nicht definiert
• Safari: Ein einzigartiges Benennungsmuster bei der Benennung von Konstruktoren. Dies ist die am wenigsten haltbare Methode aller aufgelisteten Eigenschaften und wissen Sie was? In Safari 9.1.3 wurde es behoben. Also prüfen wir gegen SafariRemoteNotificationdas nach Version 7.1 eingeführt wurde, um alle Safaris ab 3.0 und aufwärts abzudecken.
• Oper: window.opera existiert seit Jahren, aber wird fallen gelassen wenn Opera seine Engine durch Blink + V8 (verwendet von Chromium) ersetzt.
• Aktualisierung 1: Opera 15 wurde veröffentlicht, seine UA-Zeichenfolge sieht aus wie Chrome, aber mit dem Zusatz „OPR“. In dieser Version die chrome Objekt ist definiert (aber chrome.webstore ist nicht). Da Opera versucht, Chrome zu klonen, verwende ich zu diesem Zweck User-Agent-Sniffing.
• Aktualisierung 2: !!window.opr && opr.addons kann zur Erkennung verwendet werden Oper 20+ (immergrün).
• Blinken: CSS.supports() wurde in Blink eingeführt sobald Google Chrome 28 eingeschaltet hat. Es ist natürlich das gleiche Blink, das in Opera verwendet wird.

Erfolgreich getestet in:

• Firefox 0.8 – 61
• Chrom 1.0 – 71
• Oper 8.0 – 34
• Safari 3.0 – 10
• IE 6 – 11
• Kante – 20-42
• Edge-Entwickler – 80.0.361.9

Im November 2016 aktualisiert, um die Erkennung von Safari-Browsern ab Version 9.1.3 und höher einzuschließen

Aktualisiert im August 2018, um die neuesten erfolgreichen Tests auf Chrome, Firefox IE und Edge zu aktualisieren.

Im Januar 2019 aktualisiert, um die Chrome-Erkennung (aufgrund der Einstellung von window.chrome.webstore) zu beheben und die neuesten erfolgreichen Tests für Chrome einzuschließen.

Im Dezember 2019 aktualisiert, um Edge basierend auf der Chromium-Erkennung hinzuzufügen (basierend auf dem @Nimesh-Kommentar).

Sie können versuchen, die Browserversion auf folgende Weise zu überprüfen.

    <!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("Edg") != -1 )
    {
        alert('Edge');
    }
    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>

Und wenn Sie nur die IE-Browserversion wissen müssen, können Sie dem folgenden Code folgen. Dieser Code funktioniert gut für die Versionen IE6 bis IE11

<!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>

Hier sind einige bekannte Bibliotheken, die die Browsererkennung ab Dezember 2019 handhaben.

Bowser von lancedikson – 4.065★s – Zuletzt aktualisiert 02.10.2019 – 4,8 KB

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/[email protected]/es5.js"></script>

*unterstützt Edge basierend auf Chromium

Plattform.js von bestiejs – 2.550★s – Zuletzt aktualisiert 14.04.2019 – 5,9 KB

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 von gabceb – 504★s – Zuletzt aktualisiert am 23. November 2015 – 1,3 KB

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 (archiviert) von darcyclarke – 522★s – Letzte Aktualisierung 26.10.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>

Browsererkennung (archiviert) von QuirksMode – Zuletzt aktualisiert am 14. November 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>

Bemerkenswerte Erwähnungen:

• Welcher Browser – 1.355★s – Zuletzt aktualisiert am 2. Oktober 2018
• Modernizr – 23.397★s – Zuletzt aktualisiert am 12. Januar 2019 – Um ein gefüttertes Pferd zu füttern, sollte die Merkmalserkennung jedes antreiben kann ich benutzen Fragen zum Stil. Die Browser-Erkennung dient eigentlich nur dazu, benutzerdefinierte Bilder, Download-Dateien oder Anweisungen für einzelne Browser bereitzustellen.

Weiterführende Lektüre

• Paketüberfluss – Browsererkennung in JavaScript?
• Paketüberfluss – Wie erkennt man die Version eines Browsers?

Ich weiß, dass es vielleicht übertrieben ist, dafür eine Bibliothek zu verwenden, aber nur um den Thread zu bereichern, könnten Sie es überprüfen ist.js Vorgehensweise:

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

Falls jemand das nützlich findet, ich habe die Antwort von Rob W in eine Funktion umgewandelt, die den Browser-String zurückgibt, anstatt dass mehrere Variablen herumschweben. Da sich der Browser auch nicht wirklich ändern kann, ohne erneut zu laden, habe ich ihn dazu gebracht, das Ergebnis zwischenzuspeichern, um zu verhindern, dass es beim nächsten Aufruf der Funktion berechnet werden muss.

/**
 * 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());

Kurze Variante (Update 10. Juli 2020 Fehlerbehebung für die Erkennung mobiler Browser)

var browser = (function() {
    var test = function(regexp) {return regexp.test(window.navigator.userAgent)}
    switch (true) {
        case test(/edg/i): return "Microsoft Edge";
        case test(/trident/i): return "Microsoft Internet Explorer";
        case test(/firefox|fxios/i): return "Mozilla Firefox";
        case test(/opr\//i): return "Opera";
        case test(/ucbrowser/i): return "UC Browser";
        case test(/samsungbrowser/i): return "Samsung Browser";
        case test(/chrome|chromium|crios/i): return "Google Chrome";
        case test(/safari/i): return "Apple Safari";
        default: return "Other";
    }
})();
console.log(browser)

Keine Ahnung, ob es für irgendjemanden nützlich ist, aber hier ist eine Variante, die TypeScript glücklich machen würde:

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