JavaScript: comment savoir si le navigateur utilisateur est Chrome?

Mise à jour: consultez la réponse de Jonathan pour une façon actualisée de gérer cette situation. La réponse ci-dessous peut encore fonctionner, mais elle pourrait probablement déclencher des faux positifs dans d'autres navigateurs.

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); 

Cependant, comme mentionné, les agents utilisateur peuvent être falsifiés, il est donc préférable d'utiliser la détection des fonctionnalités (par exemple, Modernizer ) lors de la gestion de ces problèmes, comme l'indiquent d'autres réponses.

Pour vérifier si le navigateur est Google Chrome , essayez ceci:

 // please note, // that IE11 now returns undefined again for window.chrome // and new Opera 30 outputs true for window.chrome // and new IE Edge outputs to true now for window.chrome // and if not iOS Chrome check // so use the below updated condition var isChromium = window.chrome, winNav = window.navigator, vendorName = winNav.vendor, isOpera = winNav.userAgent.indexOf("OPR") > -1, isIEedge = winNav.userAgent.indexOf("Edge") > -1, isIOSChrome = winNav.userAgent.match("CriOS"); if(isIOSChrome){ // is Google Chrome on IOS } else if(isChromium !== null && isChromium !== undefined && vendorName === "Google Inc." && isOpera == false && isIEedge == false) { // is Google Chrome } else { // not Google Chrome } 

Exemple d'utilisation: http://codepen.io/jonathan/pen/WpQELR

Ou une méthode équivalente:

 function isChrome() { var isChromium = window.chrome, winNav = window.navigator, vendorName = winNav.vendor, isOpera = winNav.userAgent.indexOf("OPR") > -1, isIEedge = winNav.userAgent.indexOf("Edge") > -1, isIOSChrome = winNav.userAgent.match("CriOS"); if(isIOSChrome){ return true; } else if(isChromium !== null && isChromium !== undefined && vendorName === "Google Inc." && isOpera == false && isIEedge == false) { return true; } else { return false; } } 

Cela utilise la détection de propriété caractéristique / objet, la meilleure façon! La raison pour laquelle cela fonctionne est que si vous utilisez l'inspecteur Google Chrome et accédez à l'onglet de la console. Tapez 'fenêtre' et appuyez sur Entrée. Ensuite, vous pouvez afficher les propriétés DOM pour l''objet fenêtre'. Lorsque vous effondrez l'objet, vous pouvez afficher toutes les propriétés, y compris la propriété 'chrome'.

Vous ne pouvez plus utiliser strictement égal à true pour vérifier IE pour window.chrome . IE a utilisé pour renvoyer undefined , maintenant il retourne true . Mais devinez quoi, IE11 retourne à nouveau indéfini. IE11 renvoie également une chaîne vide "" pour window.navigator.vendor .

J'espère que ça aide!

METTRE À JOUR:

Merci à Halcyon991 de souligner ci-dessous, que le nouveau Opera 18+ produit également true pour window.chrome . On dirait que Opera 18 est basé sur Chromium 31 . J'ai donc ajouté un contrôle pour s'assurer que window.navigator.vendor est: "Google Inc" et non "Opera Software ASA" . Aussi grâce à Ring et Adrien Be pour la tête sur Chrome 33 ne plus revenir vrai … window.chrome maintenant vérifie si elle n'est pas nulle. Mais jetez une attention particulière à IE11, j'ai ajouté la vérification pour undefined car IE11 sort maintenant undefined , comme il l'a fait lors de la première sortie … puis, après une mise à jour, il a été généré vers une version true . Maintenant, la mise à jour récente est sortie de nouveau undefined . Microsoft ne peut pas compenser son esprit!

MISE À JOUR 24/07/2015 – ajout pour le contrôle de l'opéra

Opera 30 vient d'être publié. Il ne produit plus window.opera . Et également les sorties window.chrome à true dans le nouvel Opera 30. Donc, vous devez vérifier si OPR est dans l' userAgent . J'ai mis à jour mon état ci-dessus pour tenir compte de cette nouvelle modification dans Opera 30, puisqu'il utilise un même moteur de rendu que Google Chrome.

MISE À JOUR 13/10/2015 – ajout pour vérification IE

Vérification ajoutée pour IE Edge en raison de sa sortie true pour window.chrome .. même si IE11 produit undefined pour window.chrome . Merci à artfulhacker de nous en informer à ce sujet!

MISE À JOUR 2/5/2016 – ajout pour chèque iOS Chrome

Une vérification supplémentaire pour la vérification Chrome d'iOS CriOS raison de sa sortie true pour Chrome sur iOS. Merci à xinthose de nous en informer à ce sujet!

var is_chrome = /chrome/i.test( navigator.userAgent ); plus court: var is_chrome = /chrome/i.test( navigator.userAgent );

Une solution beaucoup plus simple est juste d'utiliser:

 var isChrome = !!window.chrome; 

Le !! Convertit simplement l'objet en une valeur booléenne. Dans les navigateurs non Chrome, cette propriété sera undefined , ce qui n'est pas vrai.

 var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() ); 

Vous pouvez également utiliser la version spécifique de Chrome:

 var ua = navigator.userAgent; if(/chrome/i.test(ua)) { var uaArray = ua.split(' ') , version = uaArray[uaArray.length - 2].substr(7); } 

Excuses à The Big Lebowski pour avoir utilisé sa réponse dans le mien.

L'utilisateur pourrait modifier l'agent utilisateur. Essayez de tester la propriété préfixée webkit dans le style objet de l'élément du body

 if ("webkitAppearance" in document.body.style) { // do stuff } 

Toutes les réponses sont fausses. "Opera" et "Chrome" sont les mêmes dans tous les cas.

(Partie modifiée)

Voici la bonne réponse

 if (window.chrome && window.chrome.webstore) { // this is Chrome }