Wie erkennt man zuverlässig den Browsertyp in JavaScript?

So erkennen Sie zuverlässig den Browsertyp

Bei der Entwicklung browserspezifischer Erweiterungen ist es entscheidend, den Browser des Benutzers genau zu identifizieren. Das Erkennen von Browsertypen ist wichtig, um für jeden Browser das richtige Add-on bereitzustellen.

Problematische Erkennungsmethoden

Ein gängiger Ansatz ist die Überprüfung der Benutzeragentenzeichenfolge. Allerdings ist diese Methode unzuverlässig, da Angreifer diesen Wert leicht fälschen können. Daher ist es notwendig, zuverlässigere Techniken einzusetzen.

Browser-Duck-Typing

Duck-Typing ist eine zuverlässigere Methode zur Browsererkennung. Hier ist ein JavaScript-Codeausschnitt, der diesen Ansatz verwendet:

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

Feature-Erkennung vs. Browser-Erkennung

Wenn möglich, entscheiden Sie sich für die Feature-Erkennung gegenüber der Browser-Erkennung. Bei der Funktionserkennung wird überprüft, ob bestimmte Funktionen oder Objekte vorhanden sind, was einen zuverlässigeren und browserunabhängigen Ansatz bietet.

Beispielverwendung

Um den Browsererkennungscode zu verwenden, befolgen Sie diese Schritte:

1. Fügen Sie das Code-Snippet in Ihre JavaScript-Datei ein.
2. Verwenden Sie die isBrowserName-Variablen um den Browsertyp zu bestimmen.
3. Je nach Browsertyp leiten Sie den Benutzer zur entsprechenden Add-on-Downloadseite weiter.

Denken Sie daran, die Browsererkennung sparsam und nur bei Bedarf zu verwenden, z Anzeige browserspezifischer Installationsanweisungen. Die Funktionserkennung sollte Ihr wichtigstes Werkzeug sein, um die Kompatibilität sicherzustellen und die Benutzererfahrung zu optimieren.

Das obige ist der detaillierte Inhalt vonWie erkennt man zuverlässig den Browsertyp in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!