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

220

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

Comment créer une telle fonctionnalité?

Rella
la source
16
Êtes - vous sûr que vous ne voulez pas faire à la place détection de caractéristiques ( au lieu de demander demander « peut faire cela que j'ai besoin? » « Est - ce Chrome? »)
bdukes
42
qui sait? il pourrait vouloir que l'utilisateur télécharge une extension chrome
naveen
2
Cette question illustre le problème de la détection d'agent utilisateur. Seulement trois ans plus tard, le Fun 3D Box Background va (essayer de) charger dans Chrome mon téléphone portable bas de gamme mais ne tentera même pas dans Firefox sur mon ordinateur de bureau haut de gamme.
Álvaro González
5
Je suis d'accord que la détection des fonctionnalités est la voie à suivre. mais il existe des zones légitimes que vous souhaitez détecter. par exemple, je veux monkey patch xhr.sendAsBinary pour chrome uniquement. ma solution initiale a vérifié si filereader.readasbinary est implémenté. cependant, j'ai des problèmes où il corrige également pour certains navigateurs mobiles et donc le téléchargement échoue. Je veux ce correctif uniquement pour le chrome.
frostymarvelous
4
Vous voulez savoir pourquoi il pourrait être pertinent de savoir si un navigateur est Chrome? Et si Chrome ne pouvait pas charger les flux RSS? Ainsi, au lieu de créer un lien vers un flux RSS qui ne se chargera pas dans Chrome, vous pourriez en fait fournir un avertissement ou rediriger l'utilisateur? Non merci à vous Google Chrome ...
Pic Mickael

Réponses:

205

Mise à jour: veuillez consulter la réponse de Jonathan pour une façon actualisée de gérer cela. La réponse ci-dessous peut toujours 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 utilisateurs peuvent être usurpés, il est donc toujours préférable d'utiliser la détection des fonctionnalités (par exemple Modernizer ) lors du traitement de ces problèmes, comme d'autres réponses le mentionnent.

Rion Williams
la source
quel est le raisonnement derrière l'utilisation de .toLowerCase - pourquoi pas seulement navigator.userAgent.indexOf ('Chrome') Je vois que beaucoup de gens l'utilisent mais je ne suis pas sûr du point?
Jon
7
@Serg car ils n'ont pas Chrome. Ce n'est qu'un skin autour d'iOS Safari.
Poetro
2
Merci, bien que votre nom var soit camelCase
Dimitri Kopriwa
5
Puisque beaucoup de navigateurs retournent vrai à ceci, voici le code que j'ai utilisé qui excluait Edge, Maxthon, iOS safari ... etc var is_chrome = ((navigator.userAgent.toLowerCase().indexOf('chrome') > -1) &&(navigator.vendor.toLowerCase().indexOf("google") > -1));
Alex C.
2
Opera (au moins la version 42) le rendement Google Incà navigator.vendor, cette méthode n'est pas l' épreuve des balles, quelque chose comme /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/OPR/.test(navigator.userAgent)marcherait probablement mieux
Yorch
314

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 accédez à l'onglet console. Tapez «fenêtre» et appuyez sur entrée. Ensuite, vous pourrez afficher les propriétés DOM de «l'objet fenêtre». 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 à vrai pour vérifier dans IE window.chrome. IE retournait undefined, maintenant il revient true. Mais devinez quoi, IE11 renvoie à 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 souligné ci-dessous que le nouvel Opera 18+ est également vrai window.chrome. On dirait qu'Opera 18 est basé sur Chromium 31 . J'ai donc ajouté une vérification pour m'assurer que le window.navigator.vendorest: "Google Inc"et non "Opera Software ASA". Merci aussi à Ring et Adrien Be pour les avertissements sur Chrome 33 ne retournant plus vrai ... window.chromevérifie maintenant si non nul. Mais faites très attention à IE11, j'ai ajouté la vérification undefineddepuis qu'IE11 sort maintenant undefined, comme il l'a fait lors de sa première sortie .. puis après quelques builds de mise à jour, il est sorti vers true... la build de mise à jour récente est de undefinednouveau en sortie . Microsoft ne peut pas se décider!

MISE À JOUR 7/24/2015 - ajout pour la vérification d'Opera

Opera 30 vient de sortir. Il ne sort plus window.opera. Et window.chromeaffiche également true dans le nouvel Opera 30. Vous devez donc vérifier si OPR est dans 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 13/10/2015 - ajout pour la vérification IE

Ajout de la vérification pour IE Edge en raison de sa sortie truepour window.chrome.. même si IE11 sort undefinedpour window.chrome. Merci à artfulhacker de nous en avoir informé!

MISE À JOUR 2/5/2016 - ajout pour la vérification iOS Chrome

Ajout d'une vérification pour iOS Chrome en CriOSraison de sa sortie truepour Chrome sur iOS. Merci à xinthose de nous en avoir informé!

MISE À JOUR 4/18/2018 - changement pour chèque Opera

Sous la direction chèque de l' Opéra, la vérification window.oprn'est pas undefineddepuis maintenant Chrome 66 a OPRen window.navigator.vendor. Merci à Frosty Z et Daniel Wallman pour avoir signalé cela!

Jonathan Marzullo
la source
Cela ne fonctionne pas pour IE10. typeof window.chrome dans IE10 renvoie {object}
magritte
2
var isGoogleChrome = window.chrome! = null && window.navigator.vendor === "Google Inc.";
Anneau
1
Merci @xinthose .. Je viens d'ajouter un chèque pour IOS Chrome .. très apprécié! :)
Jonathan Marzullo
2
Peut-être même problème que Daniel Wallman ici: mon agent utilisateur Android Chrome contient la chaîne "OPR"! Mozilla/5.0 (Linux; Android 8.0.0; ASUS_Z012D Build/OPR1.170623.026) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.109 Mobile Safari/537.36, isChrome()renvoie donc false .
Frosty Z
2
Merci @FrostyZ et @DanielWallman de nous en avoir informés. Je l'ai corrigé pour que Opera ne le vérifie window.oprpas undefined.
Jonathan Marzullo
21

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

The Big Lebowski
la source
27
Retournez truedans Microsoft Edge.
Cobby
16

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 non Chrome, cette propriété sera undefined, ce qui n'est pas vrai.

Notez que cela retourne également vrai pour les versions d'Edge basées sur Chrome (merci @Carrm de l'avoir signalé).

Drew Noakes
la source
5
Opera revient trueen fait window.chrome. Découvrez conditionizr.com qui a une détection et une correction pare-balles.
Halcyon991
7
Eh bien, Opera est essentiellement Chrome
Karel Bílek
Je ne comprends tout simplement pas pourquoi deux fois !! , vous pouvez utiliser directement, si (chrome) {}
Vishal Sharma
3
@vishalsharma, le !!convertit la valeur en soit trueou false. typeof(window.chrome)donne "object", tandis que typeof(!!window.chrome)donne "boolean". Votre exemple de code fonctionne également, car l' ifinstruction effectue la conversion.
Drew Noakes
1
Cela revient également truepour Edge.
Carrm
14

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

Josef Ježek
la source
Malheureusement, navigator.vendor === "Google Inc." sur Opera (au moins v.49) donc l'utilisation de votre code Opera apparaît comme Chrome.
Wojtek Majerski
9
Quelque part dans le monde, un chaton meurt pour chaque expression régulière dont nous n'avons pas réellement besoin.
Sz.
Aucune explication, aucune indication sur les faux positifs / négatifs, juste un morceau de code jeté ici ... Cette réponse devrait vraiment être sous-estimée. Ce n'est même pas une réponse à LA question posée.
Alexandre Germain
8
var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
naveen
la source
3
J'ai aimé cela, rappelez-vous que vous pouvez également faire var is_chrome = /chrome/i.test(navigator.userAgent); aussi
AlanFoster
14
Renvoie truedans Microsoft Edge.
Cobby
@Cobby: Avec tout le respect que je vous dois, Edge n'a pas été publié à l'époque. Merci pour l'info :)
naveen
3

Vous pouvez également souhaiter 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.

MrOodles
la source
4
La version est "537.36"dans Microsoft Edge.
Cobby
3

Vous pouvez utiliser:

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

Il travaille sur v.71

magg89
la source
navigator.userAgent.includes("Chrome")
Alex Szücs
2

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

        var isChrome = false;
        if (window.chrome && !window.opr){
            isChrome = true;
        }
        console.log(isChrome);
yurin
la source
2
const isChrome = window.chrome && !window.opr;
ifeelbadformyoldquestions
1

L'utilisateur peut changer d'agent utilisateur. Essayez de tester la webkitpropriété préfixée dans l' styleobjet de l' bodyélément

if ("webkitAppearance" in document.body.style) {
  // do stuff
}
guest271314
la source
1
Dans firefox: ("webkitAnimation" dans document.body.style) === true
Tomas Prado
3
Pour info: 'webkitAppearance' ne fonctionne plus non plus. Edge l'utilise maintenant. Il vaut probablement mieux supprimer votre réponse. ^^
hexalys
0

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 l'essentiel ici et le violon ici

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

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

La vérification d'Opera, Edge et Chrome est simple. Ils ont des différences dans userAgent. OPRn'existe que dans Opera. Edgen'existe que dans Edge. Donc, pour vérifier Chrome, cette chaîne ne devrait pas être là.

Quant à Firefox et IE, je ne peux pas expliquer ce qu'ils font.

Je vais ajouter cette fonctionnalité à un package que j'écris

iamdevlinph
la source
-4

toutes les réponses sont fausses. "Opera" 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
}
Ararat Harutyunyan
la source
1
Un meilleur commentaire qu'une réponse.
Jace Cotton
Au cas où vous vous demandez pourquoi vous avez été modifié, ce n'est tout simplement pas vrai. Par exemple, ils gèrent les raccourcis clavier et accèdent aux modificateurs de touches différemment (et ceux-ci ne peuvent pas non plus être détectés).
Zilk
Je ne dis pas que «opéra» et «chrome» sont le même navigateur, seule l'icône est différente. Je dis que les méthodes décrites ci-dessus donnent le même résultat pour les deux navigateurs.
Ararat Harutyunyan
@Zilk Avez-vous testé par exemple la première réponse qui a 66 votes positifs?
Ararat Harutyunyan,
9
Cela ne fonctionnera plus à partir du chrome 71. window.chrome.webstoreest maintenantundefined
Esteban