JavaScript: Comment savoir si le navigateur de L'utilisateur est Chrome?

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
// but needs to check if window.opr is not undefined
// 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;
var winNav = window.navigator;
var vendorName = winNav.vendor;
var isOpera = typeof window.opr !== "undefined";
var isIEedge = winNav.userAgent.indexOf("Edge") > -1;
var isIOSChrome = winNav.userAgent.match("CriOS");

if (isIOSChrome) {
   // is Google Chrome on IOS
} else if(
  isChromium !== null &&
  typeof 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

la raison pour laquelle cela fonctionne est que si vous utilisez L'inspecteur Google Chrome et aller à l'onglet console. Tapez 'window' et appuyez sur Entrée. Ensuite, vous pourrez voir les propriétés DOM pour l'objet 'window object'. Lorsque vous réduisez l'objet, vous pouvez voir toutes les propriétés, y compris la propriété "chrome".

vous ne pouvez pas utiliser strictement égale vrai plus pour enregistrer IE pour window.chrome . IE utilisé pour retourner undefined , maintenant il retourne true . mais devinez quoi, IE11 retourne à nouveau Non défini. IE11 retourne aussi une chaîne vide "" pour window.navigator.vendor .

j'espère que cela aidera!

mise à jour:

Merci à Halcyon991 pour souligner ci-dessous, que le nouvel Opéra de 18+ également sorties sur true pour window.chrome . On dirait que Opera 18 est basé sur Chrome 31 . J'ai donc ajouté une vérification pour m'assurer que le window.navigator.vendor est: "Google Inc" et non "Opera Software ASA" . Aussi merci à anneau et Adrien Be pour les têtes vers le haut sur le Chrome 33 pas de retour vrai plus... window.chrome vérifie maintenant si elle n'est pas nulle. Mais faites très attention à IE11, j'ai ajouté le check-back pour undefined puisque IE11 sort maintenant undefined , comme il l'a fait lors de sa première sortie.. puis, après quelques mises à jour, il est sorti en true .. maintenant, la récente mise à jour de build est de sortir undefined à nouveau. Microsoft ne peut pas faire, c'est l'esprit!

mise à JOUR 7/24/2015 - plus pour l'Opéra, cochez la case

Opera 30 était vient de paraître. Il ne sort plus window.opera . Et aussi window.chrome sort à true dans le Nouvel Opera 30. Vous devez donc vérifier si OPR est dans le userAgent . J'ai mis à jour ma condition ci-dessus pour tenir compte de ce nouveau changement dans Opera 30, car il utilise le même moteur de rendu que Google Chrome.

mise à JOUR 10/13/2015 - plus pour IE cochez la case

contrôle ajouté pour IE Edge due à il produit true pour window.chrome .. même si IE11 produit undefined pour window.chrome . Merci à artfulhacker pour nous faire savoir à ce sujet!

UPDATE 2/5/2016-ajout pour iOS Chrome check

contrôle ajouté pour iOS Chrome contrôle CriOS en raison de la sortie true pour Chrome sur iOS. Merci à xinthose pour nous faire savoir sur ce!

mise à JOUR 4/18/2018 - changement pour l'Opéra, cochez la case

contrôle édité pour Opera, la vérification window.opr n'est pas undefined depuis maintenant Chrome 66 a OPR dans window.navigator.vendor . Merci à Frosty Z et Daniel Wallman pour avoir rapporté cela!

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

console.log(JSON.stringify({
  isAndroid: /Android/.test(navigator.userAgent),
  isCordova: !!window.cordova,
  isEdge: /Edge/.test(navigator.userAgent),
  isFirefox: /Firefox/.test(navigator.userAgent),
  isChrome: /Google Inc/.test(navigator.vendor),
  isChromeIOS: /CriOS/.test(navigator.userAgent),
  isChromiumBased: !!window.chrome && !/Edge/.test(navigator.userAgent),
  isIE: /Trident/.test(navigator.userAgent),
  isIOS: /(iPhone|iPad|iPod)/.test(navigator.platform),
  isOpera: /OPR/.test(navigator.userAgent),
  isSafari: /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent),
  isTouchScreen: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
  isWebComponentsSupported: 'registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template')
}, null, '  '));

une solution beaucoup plus simple est juste à utiliser:

var isChrome = !!window.chrome;

le !! convertit simplement l'objet en valeur booléenne. Dans les navigateurs Non-Chrome , cette propriété sera undefined , ce qui n'est pas véridique.

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

vous pouvez également vouloir 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);
}

toutes mes excuses au grand Lebowski pour avoir utilisé sa réponse dans la mienne.

peut changer d'agent utilisateur . Essayez de tester pour webkit propriété préfixée dans style objet de body élément

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

toutes les réponses sont fausses. "Opéra" et "Chrome" sont les mêmes dans tous les cas.

(partie éditée)

voici la bonne réponse

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