web-dev-qa-db-fra.com

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

J'ai besoin d'une fonction retournant une valeur booléenne pour vérifier si le navigateur est Chrome .

Comment créer une telle fonctionnalité?

javascripthtmlgoogle-chromebrowser-detection
182
Rella

Mise à jour: Veuillez voir La réponse de Jonathan pour un moyen actualisé de gérer cela. La réponse ci-dessous peut toujours fonctionner, mais elle pourrait probablement provoquer des faux positifs dans d'autres navigateurs.

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

Cependant, comme mentionné, les agents utilisateurs peuvent être usurpés, il est donc toujours préférable d’utiliser la détection de caractéristiques (par exemple, Modernizer ) lors du traitement de ces problèmes, comme indiqué dans d’autres réponses.

182
Rion Williams

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

Cela fonctionne parce que si vous utilisez l'inspecteur Google Chrome et que vous accédez à l'onglet Console. Tapez 'window' et appuyez sur enter. Ensuite, vous pourrez voir les propriétés du DOM pour «l'objet window». Lorsque vous réduisez 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 archiver IE pour window.chrome. IE 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 d’avoir fait remarquer ci-dessous que le nouvel Opera 18+ a également la valeur true pour window.chrome. On dirait que Opera 18 est basé sur Chromium 31. J'ai donc ajouté un chèque pour m'assurer que le window.navigator.vendor est: "Google Inc" et que ce n'est pas "Opera Software ASA". Merci également à Ring et Adrien Be pour le heads-up sur Chrome 33 qui ne renvoie plus la valeur true ... window.chrome vérifie à présent si la valeur n'est pas nulle. Mais attention à IE11, j’ai ajouté la vérification pour undefined puisque IE11 affiche maintenant undefined, comme lors de sa première publication .. puis après quelques versions de mise à jour, il est sorti à true .. maintenant la dernière mise à jour génère undefined. Microsoft n'arrive pas à se décider!

UPDATE 24/07/2015 - ajout à la vérification de l'opéra

Opera 30 vient de sortir. Il ne génère plus window.opera. Et aussi window.chrome affiche 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 prendre en compte ce nouveau changement dans Opera 30, car il utilise le même moteur de rendu que Google Chrome.

UPDATE 10/13/2015 - ajout de la vérification IE

Ajout de la vérification de IE Edge en raison de la sortie de true pour window.chrome .. même si IE11 génère undefined pour window.chrome. Merci à artfulhacker de nous avoir informés de cela!

UPDATE 25/02/2016 - ajout du contrôle iOS Chrome

Ajout d'une vérification pour iOS Chrome: CriOS en raison de la sortie de true pour Chrome sur iOS. Merci à xinthose de nous avoir informés de cela!

UPDATE 18/04/2018 - modification de la vérification de l'opéra

Vérification vérifiée pour Opera, la vérification de window.opr n'est pas undefined puisque Chrome 66 a maintenant OPR dans window.navigator.vendor. Merci à Frosty Z et Daniel Wallman pour avoir signalé cela!

273
Jonathan Marzullo

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

21
The Big Lebowski

Une solution beaucoup plus simple consiste simplement à utiliser:

var isChrome = !!window.chrome;

Le !! convertit simplement l'objet en une valeur booléenne. Dans les navigateurs autres que Chrome, cette propriété sera undefined, ce qui n’est pas le cas.

13
Drew Noakes

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, '  '));

13
Josef Ježek
var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
8
naveen

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 à The Big Lebowski pour avoir utilisé sa réponse dans la mienne.

2
MrOodles

Vous pouvez utiliser:

navigator.userAgent.indexOf("Chrome") != -1

Il travaille sur v.71

2
magg89

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

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

Cochez cette case: Comment détecter les navigateurs Safari, Chrome, IE, Firefox et Opera?

Dans votre cas: Var isChrome = !! window.chrome && (!! window.chrome.webstore || !! window.chrome.runtime);

0
cedenoaugusto

Fonctionne pour moi sur Chrome sur Mac. Semble être plus simple ou plus fiable (dans le cas où la chaîne userAgent est testée) que tout ce qui précède 

        var isChrome = false;
        if (window.chrome && !window.opr){
            isChrome = true;
        }
        console.log(isChrome);
0
yurin

Connaître les noms des différents navigateurs de bureau (Firefox, IE, Opera, Edge, Chrome). Sauf Safari.

function getBrowserName() {
  var browserName = '';
  var userAgent = navigator.userAgent;
  (typeof InstallTrigger !== 'undefined') && (browserName = 'Firefox');
  ( /* @cc_on!@*/ false || !!document.documentMode) && (browserName = 'IE');
  (!!window.chrome && userAgent.match(/OPR/)) && (browserName = 'Opera');
  (!!window.chrome && userAgent.match(/Edge/)) && (browserName = 'Edge');
  (!!window.chrome && !userAgent.match(/(OPR|Edge)/)) && (browserName = 'Chrome');

  /**
   * Expected returns
   * Firefox, Opera, Edge, Chrome
   */
  return browserName;
}

Fonctionne dans les versions de navigateur suivantes:

Opera - 58.0.3135.79
Firefox - 65.0.2 (64-bit)
IE - 11.413.15063 (JS Fiddle no longer supports IE just paste in Console)
Edge - 44.17763.1.0
Chrome - 72.0.3626.121 (Official Build) (64-bit)

Voir le Gist here et le violon here

L'extrait de code d'origine ne fonctionnait plus pour Chrome et j'ai oublié où je l'avais trouvé. Il y avait un safari auparavant mais je n'ai plus accès au safari, je ne peux donc plus vérifier.

Seuls les codes Firefox et IE faisaient partie de l'extrait de code d'origine.

La vérification pour Opera, Edge et Chrome est simple. Ils ont des différences dans le userAgent. OPR n'existe que dans Opera. Edge n'existe que dans Edge. Donc, pour vérifier Chrome, ces chaînes ne devraient pas être là.

En ce qui concerne Firefox et IE, je ne peux pas expliquer ce qu’ils font.

Je vais ajouter cette fonctionnalité à un paquet que je vous écris

0
iamdevlinph