Détecter le navigateur avec JavaScript

Lorsque nous développons une application Web, il se peut que nous devions détecter le navigateur que l'utilisateur utilise pour valider certaines fonctionnalités que nous avons implémentées et qui ne fonctionnent pas avec lui ou simplement parce que nous souhaitons activer des fonctionnalités supplémentaires en fonction de un navigateur ou un autre.

La meilleure chose pour ces cas est d'utiliser JavaScript et nous épargne des maux de tête pour détecter le navigateur, voyons comment nous le faisons.

Détecter le navigateur

Créons d'abord un HTML simple d'inclure notre JavaScript et vérifier nos validations, il contiendra le contenu suivant :

 Détecter le navigateur de l'utilisateur 

Déjà avec notre code HTML nous pouvons commencer à créer notre code JavaScript qui ira à l'intérieur des balises de script. Détectons d'abord l'un des navigateurs les plus utilisés, Google Chrome, pour cela nous utiliserons l'objet navigateur qui contient tout ce dont nous avons besoin :

 var es_chrome = navigator.userAgent.toLowerCase().indexOf('chrome')> -1; if (es_chrome) {alerte ("Le navigateur utilisé est Chrome"); }

Lors de l'exécution de notre exemple dans un navigateur autre que Google Chrome Nous n'obtiendrons pas le message, cependant lors de son exécution dans le navigateur mentionné, nous obtiendrons le message suivant :

On sait déjà détecter Google Chrome, voyons comment faire pour Firefox:

 var es_firefox = navigator.userAgent.toLowerCase().indexOf('firefox')> -1; if (es_firefox) {alerte ("Le navigateur utilisé est Firefox"); }

Comme on peut le voir, le code est assez similaire, puisque nous pouvons utiliser l'objet de la même manière navigateur et si nous réalisons qu'avec le -1 nous détectons toutes les versions de celui-ci, voyons la réponse de celui-ci lors de son exécution dans Firefox:

Nous pouvons également détecter le navigateur Opéra, Il n'est pas largement utilisé parmi les utilisateurs mais il vaut la peine de savoir comment le faire également :

 var is_opera = navigator.userAgent.toLowerCase().indexOf('opera'); if (es_opera) {alerte ("Le navigateur utilisé est Opera"); }

Enfin, il est important de détecter Internet Explorer Comme c'est l'un des navigateurs qui pose le plus de problèmes en développement web, au niveau des styles, des événements et des effets, voyons comment le détecter :

 var es_ie = navigator.userAgent.indexOf ("MSIE")> -1; if (es_ie) {alerte ("Le navigateur utilisé est Internet Explorer"); }

Nous l'exécutons dans le navigateur et nous obtiendrons la réponse suivante vérifiant ainsi notre fonctionnalité :

Nous terminons donc ce tutoriel en ajoutant des portions de code qui nous aideront à détecter le navigateur de l'utilisateur, quelque chose de très utile pour les occasions où nous devons valider son environnement, que ce soit pour résoudre des problèmes de moteur ou pour activer des fonctionnalités spéciales.

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif