Détection des navigateurs en javascript

Détection du navigateur JavaScript: une solution simple et efficace

Dans le développement de pages Web, la détection du type de navigateur de l'utilisateur est très utile pour traiter le bogue spécifique du navigateur, la réparation de compatibilité des applications ou les performances d'optimisation. Bien que le développement moderne préconise la détection des caractéristiques plutôt que la détection du navigateur, il est toujours pratique de comprendre le navigateur utilisé par les utilisateurs. Cet article explorera une méthode JavaScript simple et efficace, en utilisant les attributs

pour détecter différents navigateurs. navigator.userAgent

Comprendre la chaîne utilisateur

L'attribut fournit des informations détaillées sur les navigateurs d'utilisateurs, les systèmes d'exploitation et les moteurs de rendu. Chaque navigateur a un mode userAgent unique et peut être utilisé pour l'identification.

window.navigator.userAgent par exemple:

À partir de cela, nous pouvons extraire des informations utiles.

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

détecter différents navigateurs

Ce qui suit est un moyen simple d'utiliser JavaScript pour détecter les navigateurs:

Code Explication détaillée

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

détecter Microsoft Edge:

1. Les chaînes utilisateur du navigateur de bord contiennent "Edge".

détecter Google Chrome:

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

2. Parce que Edge contient également "Chrome", nous l'excluons à l'extérieur du test.
détecter safari:

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

La raison pour laquelle cela est efficace est que la chaîne usaragente de Safari contient "safari", mais nous excluons Edge pour éviter une erreur de jugement.
3. Détection des appareils mobiles:

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

Le navigateur mobile contient généralement "mobile" dans son usaragent.

4. Détectez l'Internet Explorer sur Windows 7:

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

L'Usragent de Windows 7 contient "Windows NT 6.1", et IE 11 contient "RV: 11".

5. Détection de l'ancienne version de Safari:

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

UserAgent de l'ancienne version de Safari contient "Version / 8" ou "Version / 9".

La fonction d'activation du navigateur spécifique:

Cela garantit que cette fonction est activée uniquement sur IE sur Chrome, Safari ou Windows 7 sans être utilisé sur des appareils mobiles.

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

Exemple de code complet

7. Conclusion UserAgent pour la détection du navigateur est très utile lorsque la détection des caractéristiques est insuffisante. Cependant, il est préférable d'utiliser l'amélioration et l'élégance progressives pour vous assurer que votre application Web peut s'exécuter normalement dans tous les navigateurs. Grâce à cette méthode, vous pouvez implémenter une solution ou une optimisation spécifique du navigateur tout en maintenant la flexibilité de l'application Web. Avez-vous rencontré le problème de la compatibilité du navigateur dans le projet? Bienvenue pour partager vos réflexions dans les commentaires!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!