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

Lesezeit: 13 Minuten

Benutzer-Avatar
FrankC

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?

  • versuchen Sie detectjs, es kann für alle Browser verwendet werden

    – Alter

    9. März 2016 um 10:54 Uhr

  • Mögliches Duplikat der Browsererkennung in JavaScript?

    – Matthijs Wessels

    2. September 2016 um 10:23 Uhr

  • detect.js wird nicht mehr gepflegt (lt github.com/darcyclarke/Detect.js), Sie empfehlen github.com/lancedikson/bowser

    – Jakow L

    25. April 2018 um 17:02 Uhr

  • Mögliches Duplikat von Wie können Sie die Version eines Browsers erkennen?

    – KyleMit

    14. Februar 2019 um 14:05 Uhr

  • Ich möchte diese Frage erneut auftauchen – gibt es darauf schon eine zuverlässige und einfache Antwort? Es gibt viele (alte) Fragen wie diese auf SO und doch funktionieren die meisten davon ab userAgent Funktion, die sogar w3schools anerkennt, ist ungenau. Ich habe einige der Antworten auf diese Frage und ähnliche getestet, und keine davon scheint zuverlässig zu sein. Wenn ich besser dran bin, eine neue Frage zu stellen, lass es mich wissen.

    – 5Diraptor

    17. März 2021 um 16:20 Uhr

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 = /*@[email protected]*/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).

  • FYI Dies funktioniert nicht mit Chrome-Erweiterungen als window.chrome.webstore ist dort undefiniert. Habe es nicht mit Firefox-Erweiterungen überprüft. is.js Die an anderer Stelle erwähnte Funktion funktioniert sowohl in Chrome- als auch in Firefox-Erweiterungen.

    – neuf

    31. August 2016 um 7:11 Uhr

  • isSafari funktioniert nicht mit Safari 10. Ich werde argumentieren, dass dies eine schlechte Lösung ist (nicht, dass ich eine gute hätte). Es gibt keine Garantie dafür, dass viele der Dinge, nach denen Sie suchen, nicht von anderen Browsern entfernt ODER hinzugefügt werden. Jede Website, die diesen Code für die Suche nach Safari verwendet hat, ist gerade mit macOS Sierra- oder Safari 10-Upgrades zusammengebrochen 🙁

    – Gman

    29. September 2016 um 5:16 Uhr


  • Aber wurde dies auf der getestet mobile Versionen dieser Browser sowie die Desktop-Versionen zu? Und ehrlich gesagt gibt es pro Plattform verschiedene mobile Versionen und verschiedene Desktop-Versionen. Also wirklich, Firefox hat 3 Binärdateien für Windows, Linux, Mac OS und 2 Binärdateien für Android und iOS.

    – DrZ214

    23. Dezember 2016 um 3:53 Uhr


  • Die jetzige isSafari funktioniert nicht darunter <iframe> unter Safari 10.1.2

    – Mikko Ohtamaa

    14. September 2017 um 19:24 Uhr

  • window.chrome.webstore ist ab Chrome Ver. 71: blog.chromium.org/2018/06/…

    – st_bk

    29. Oktober 2018 um 6:48 Uhr

Benutzer-Avatar
Nimesh

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>

  • Warum sollte man so viele Codezeilen schreiben? userAgent ist mehrdeutig.

    – igauravsehrawat

    15. Oktober 2015 um 7:00 Uhr

  • Was ist mit Microsoft Edge?

    – Benutzer6031759

    15. Juni 2016 um 23:25 Uhr

  • Die obige Antwort sucht nach Chrom, bevor sie nach Safari sucht. weil Safari nicht haben wird chrome Stichwort im Useragent. Beispiel für Safari-Useragent – mozilla/5.0 (macintosh; intel mac os x 10_11_5) applewebkit/601.6.17 (khtml, like gecko) version/9.1.1 safari/601.6.17

    – Golak Sarangi

    17. August 2016 um 4:07 Uhr

  • Stackoverflow verwendet diese Methode

    – vityavv

    7. September 2016 um 14:02 Uhr

  • Beim Testen in Opera (neueste Version) wird für mich „Chrome“ zurückgegeben. Um dies zu beheben, habe ich die Opera if-Anweisung geändert in: if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )

    – Kyle Vasella

    5. Dezember 2017 um 23:05 Uhr


Benutzer-Avatar
KyleMit

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?

  • Es lohnt sich ein paar KB Overhead, um das Rad nicht neu zu erfinden.

    – 111

    13. März 2020 um 21:36 Uhr

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

Benutzer-Avatar
Will Squire

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 = /*@[email protected]*/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());

  • im Edge-Browser kehrt es zurück Chrom

    – Riz

    29. Dezember 2016 um 11:25 Uhr

  • @eFriend Ich habe die Antwort auf die neuesten Browsertests aktualisiert.

    – Pilau

    8. Februar 2017 um 10:11 Uhr

  • Das gefällt mir, aber ich hätte lieber einen Fallback auf userAgent() statt “Weiß nicht” gehabt.

    – HoldOffHunger

    26. Oktober 2017 um 19:39 Uhr

  • Eigentum window.chrome.webstore wurde in Chrome 71 entfernt, daher funktioniert dieser Ansatz nicht mehr.

    – Bedla

    19. Dezember 2018 um 10:34 Uhr


  • Sie können die Funktion mit einer Funktion überschreiben, die einfach das cachedResult zurückgibt und die if-Anweisung weglässt. Beim ersten Mal müssen Sie noch das Ergebnis zurückgeben. browser = function(){ return cachedResult}; cachedResult zurückgeben;

    – Timar Ivo Batis

    15. Juli 2019 um 14:59 Uhr

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)

  • im Edge-Browser kehrt es zurück Chrom

    – Riz

    29. Dezember 2016 um 11:25 Uhr

  • @eFriend Ich habe die Antwort auf die neuesten Browsertests aktualisiert.

    – Pilau

    8. Februar 2017 um 10:11 Uhr

  • Das gefällt mir, aber ich hätte lieber einen Fallback auf userAgent() statt “Weiß nicht” gehabt.

    – HoldOffHunger

    26. Oktober 2017 um 19:39 Uhr

  • Eigentum window.chrome.webstore wurde in Chrome 71 entfernt, daher funktioniert dieser Ansatz nicht mehr.

    – Bedla

    19. Dezember 2018 um 10:34 Uhr


  • Sie können die Funktion mit einer Funktion überschreiben, die einfach das cachedResult zurückgibt und die if-Anweisung weglässt. Beim ersten Mal müssen Sie noch das Ergebnis zurückgeben. browser = function(){ return cachedResult}; cachedResult zurückgeben;

    – Timar Ivo Batis

    15. Juli 2019 um 14:59 Uhr

Benutzer-Avatar
Emma

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 (/*@[email protected]*/false || !!document["documentMode"]) {
        return 'ie';
    }

    // Edge 20+
    if (!(/*@[email protected]*/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';
    }
}

  • Warum haben Sie einige ifs mit “false” als Bedingung?

    – Yonatan Nir

    28. Oktober 2019 um 11:45 Uhr

  • @YonatanNir Ich denke, es soll die bedingte Kompilierung erkennen: developer.mozilla.org/en-US/docs/Web/JavaScript/…

    – Lucas Azevedo

    5. März 2020 um 12:13 Uhr

  • Typoskript sagen das gleiche mit diesem: Argument vom Typ ‘{ new (): HTMLElement; Prototyp: HTMLElement; }’ ist Parametern vom Typ ‘string’ nicht zuweisbar

    – Jorge Monroy

    9. September 2021 um 21:40 Uhr

1320940cookie-checkWie erkennt man die Browser Safari, Chrome, IE, Firefox und Opera?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy