Erkennen von Browsern in JavaScript

JavaScript -Browser -Erkennung: Eine einfache und effektive Lösung

Bei der Entwicklung von Webseiten ist das Erkennen des Browsertyps des Benutzers sehr hilfreich für die Verarbeitung der spezifischen Fehlerreparatur oder Optimierungsleistung des Browsers. Obwohl die moderne Entwicklung eher den charakteristischen Erkennung als den Erkennung von Browser befürwortet, ist es immer noch praktisch, den von den Benutzern verwendeten Browser zu verstehen. In diesem Artikel wird eine einfache und effektive JavaScript -Methode unter Verwendung von

Attributen zum Erkennen verschiedener Browser untersucht. navigator.userAgent

Verstehen Sie die Benutzeragent -Zeichenfolge

Das Attribut enthält detaillierte Informationen zu Benutzerbrowsern, Betriebssystemen und Rendering -Motoren. Jeder Browser verfügt über einen eindeutigen Benutzeragentenmodus und kann zur Identifizierung verwendet werden.

window.navigator.userAgent zum Beispiel:

Aus diesem Fall können wir nützliche Informationen extrahieren.

<code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36</code>

Erkennen verschiedener Browser

Folgendes ist eine einfache Möglichkeit, JavaScript zum Erkennen von Browsern zu verwenden:

Code detaillierte Erläuterung

<code class="language-javascript">const userAgent = window.navigator.userAgent;
const isEdge = /Edge/.test(userAgent); // 检测Microsoft Edge
const isChrome = /chrome/i.test(userAgent) && !isEdge; // 检测Chrome，排除Edge
const isSafari = /safari/i.test(userAgent) && !isEdge; // 检测Safari，排除Edge
const isMobile = /mobile/i.test(userAgent); // 检测移动设备
const isIEWin7 = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent); // 检测Windows 7上的Internet Explorer 11
const isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent)); // 检测旧版Safari

const isEnabledForBrowser = (isChrome || isSafari || isIEWin7) && !isMobile;</code>

Microsoft Edge erkennen:

1. Benutzeragent -Zeichenfolgen des Edge -Browsers enthalten "Kante".

Google Chrome nachweisen:

<code class="language-javascript">const isEdge = /Edge/.test(userAgent);</code>

2. Da Edge auch "Chrom" enthält, schließen wir es außerhalb des Tests aus.
Safari erkennen:

<code class="language-javascript">const isChrome = /chrome/i.test(userAgent) && !isEdge;</code>

Der Grund, warum dies wirksam ist, ist, dass Safari's USARAGent -String "Safari" enthält, aber wir schließen die Kante aus, um Fehleinschätzungen zu vermeiden.
3. Erkennen mobiler Geräte:

<code class="language-javascript">const isSafari = /safari/i.test(userAgent) && !isEdge;</code>

Mobile Browser enthält normalerweise "Mobile" in seiner USARAGENT.

4. Erkennen Sie den Internet -Explorer unter Windows 7:

<code class="language-javascript">const isMobile = /mobile/i.test(userAgent);</code>

Der USRAGENT von Windows 7 enthält "Windows NT 6.1", und dh 11 enthält "RV: 11".

5. Erkennen der alten Version von Safari:

<code class="language-javascript">const isIEWin7 = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent);</code>

Benutzeragent der alten Version von Safari enthält "Version/8" oder "Version/9".

Die Funktion des spezifischen Browsers aktivieren:

Dies stellt sicher, dass diese Funktion nur unter IE auf Chrome, Safari oder Windows 7 aktiviert ist, ohne auf Mobilgeräten verwendet zu werden.

<code class="language-javascript">const isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent));</code>

Beispiel für volles Code

7. Schlussfolgerung Benutzeragent für die Browsererkennung ist sehr nützlich, wenn die charakteristische Erkennung nicht ausreicht. Es ist jedoch am besten, eine allmähliche Verbesserung und Eleganz zu verwenden, um sicherzustellen, dass Ihre Webanwendung in allen Browsern normal ausgeführt wird. Mit dieser Methode können Sie eine bestimmte Lösung oder Optimierung des Browsers implementieren und gleichzeitig die Flexibilität der Webanwendung beibehalten. Haben Sie das Problem der Browserkompatibilität im Projekt gestoßen? Willkommen, um Ihre Gedanken in den Kommentaren zu teilen!

Das obige ist der detaillierte Inhalt vonErkennen von Browsern in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!