Wie erkenne ich einen Browser für Safari, Chrome, IE, Firefox und Opera?

Ich habe 5 Addons / Erweiterungen für FF, Chrome, IE, Opera und Safari.

Wie kann ich den Benutzerbrowser erkennen und umleiten (sobald auf eine Installationsschaltfläche geklickt wurde), um das entsprechende Addon herunterzuladen?

Wenn Sie nach einer zuverlässigen Browsererkennung suchen, wird häufig die Zeichenfolge des Benutzeragenten überprüft. Diese Methode ist nicht zuverlässig, da es trivial ist, diesen Wert zu fälschen.
Ich habe eine Methode geschrieben, um Browser durch Eingabe von Enten zu erkennen .

Verwenden Sie die Browsererkennungsmethode nur, wenn dies wirklich erforderlich ist, z. B. das Anzeigen von browserspezifischen Anweisungen zum Installieren einer Erweiterung. Verwenden Sie nach Möglichkeit die Funktionserkennung.

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;

Analyse der Zuverlässigkeit

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

• Internet Explorer: JScript's Conditional Compilation (bis IE9) und document.documentMode.
• Edge: In Trident- und Edge-Browsern macht die Implementierung von Microsoft den StyleMediaKonstruktor verfügbar . Ohne Trident bleiben wir bei Edge.
• Edge (basierend auf Chrom): Der Benutzeragent enthält am Ende den Wert "Edg / [version]" (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 chromeObjekt, das mehrere Eigenschaften enthält, einschließlich eines dokumentierten chrome.webstoreObjekts.
• Update 3 chrome.webstoreist veraltet und in neueren Versionen nicht definiert
• Safari: Ein eindeutiges Namensmuster 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 dies behoben. Wir prüfen also SafariRemoteNotification, was nach Version 7.1 eingeführt wurde, um alle Safaris ab 3.0 abzudecken.
• Opera: window.operaexistiert seit Jahren, wird jedoch gelöscht, wenn Opera seine Engine durch Blink + V8 (von Chromium verwendet) ersetzt.
• Update 1: Opera 15 wurde veröffentlicht . Die UA-Zeichenfolge sieht aus wie Chrome, jedoch mit dem Zusatz "OPR". In dieser Version ist das chromeObjekt definiert (aber chrome.webstorenicht). Da Opera sich bemüht, Chrome zu klonen, verwende ich zu diesem Zweck das Sniffing von Benutzeragenten.
• Update 2: !!window.opr && opr.addonsKann verwendet werden, um Opera 20+ (immergrün) zu erkennen .
• Blink: CSS.supports() wurde in Blink eingeführt, als Google Chrome 28 einschaltete. Es ist natürlich das gleiche Blink, das in Opera verwendet wurde.

Erfolgreich getestet in:

• Firefox 0.8 - 61
• Chrome 1.0 - 71
• Opera 8.0 - 34
• Safari 3.0 - 10
• IE 6 - 11
• Kante - 20-42
• Edge Dev - 80.0.361.9

Im November 2016 aktualisiert, um die Erkennung von Safari-Browsern ab 9.1.3 zu ermöglichen

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

Aktualisiert im Januar 2019, um die Chrome-Erkennung (aufgrund der Abwertung von window.chrome.webstore) zu korrigieren und die neuesten erfolgreichen Tests für Chrome einzuschließen.

Im Dezember 2019 aktualisiert, um Edge basierend auf der Chrom-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("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-Browser-Version kennen 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>

Ich weiß, dass es vielleicht übertrieben ist, eine Bibliothek dafür zu verwenden, aber nur um den Thread anzureichern, können Sie die Vorgehensweise von is.j überprüfen :

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

Hier sind einige prominente Bibliotheken, die sich ab Dezember 2019 mit der Browsererkennung befassen.

Bowser von lancedikson - 4.065 ★ s - Letzte Aktualisierung 2. Oktober 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/[email protected]/es5.js"></script>

* unterstützt Edge basierend auf Chromium

Platform.js von bestiejs - 2.550 ★ s - Letzte Aktualisierung 14. April 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 von gabceb - 504 ★ s - Letzte Aktualisierung 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. Oktober 2015 - 2,9 KB

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 - Letzte Aktualisierung 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:

• WhichBrowser - 1.355 ★ s - Zuletzt aktualisiert am 2. Oktober 2018
• Modernizr - 23.397 ★ s - Letzte Aktualisierung 12. Januar 2019 - Um ein gefüttertes Pferd zu füttern, sollte die Funktionserkennung alle Fragen im CanIuse- Stil beantworten. Die Browsererkennung dient eigentlich nur dazu, benutzerdefinierte Bilder, Download-Dateien oder Anweisungen für einzelne Browser bereitzustellen.

Weiterführende Literatur

• Stapelüberlauf - Browsererkennung in JavaScript?
• Stapelüberlauf - Wie können Sie die Version eines Browsers erkennen?

Für den Fall, dass jemand dies nützlich findet, habe ich die Antwort von Rob W in eine Funktion umgewandelt, die die Browserzeichenfolge zurückgibt, anstatt mehrere Variablen im Umlauf zu haben. Da sich der Browser auch nicht wirklich ändern kann, ohne ihn erneut zu laden, habe ich das Ergebnis zwischengespeichert, um zu verhindern, dass es beim nächsten Aufruf der Funktion bearbeitet 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

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)

Hier ist eine 2016 angepasste Version von Robs Antwort, einschließlich Microsoft Edge und Erkennung von Blink:

( Bearbeiten : Ich habe Robs Antwort oben mit diesen Informationen aktualisiert.)

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

Das Schöne an diesem Ansatz ist, dass er sich auf die Eigenschaften der Browser-Engine stützt und daher auch abgeleitete Browser wie Yandex oder Vivaldi abdeckt, die praktisch mit den wichtigsten Browsern kompatibel sind, deren Engines sie verwenden. Die Ausnahme ist Opera, das sich auf das Schnüffeln von Benutzeragenten stützt, aber heute (dh ab Version 15) ist sogar Opera selbst nur eine Shell für Blink.

Sie können die verschiedenen Browser-Fehlermeldungen verwenden tryund catchverwenden. IE und Edge waren verwechselt, aber ich habe die Ententypisierung von Rob W verwendet (basierend auf diesem Projekt hier: 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;
        }
    }
};