JavaScript: Как узнать, является ли браузер пользователя Chrome?

Question

Мне нужна функция, возвращающая логическое значение, чтобы проверить, является ли браузер Chrome.

Как мне создать такую ​​функциональность?

Answer 1

Обновление: Пожалуйста, смотрите ответ Джонатана для обновленного способа справиться с этим. Ответ ниже может все еще работать, но он может вызвать некоторые ложные срабатывания в других браузерах.

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

Однако, как уже упоминалось, пользовательские агенты могут быть подделаны, поэтому всегда лучше использовать функцию обнаружения (например, Modernizer) при решении этих проблем, как упоминают другие ответы.

Answer 2

Чтобы проверить, является ли браузер Google Chrome, попробуйте это:

// 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 
}

Пример использования: http://codepen.io/jonathan/pen/WpQELR

Это работает потому, что если вы используете инспектор Google Chrome и переходите на вкладку консоли. Введите "окно" и нажмите Enter. Тогда вы сможете просмотреть свойства DOM для "объекта окна". Когда вы свернете объект, вы сможете просмотреть все свойства, включая свойство 'chrome'.

Вы больше не можете использовать строго равные true, чтобы проверить в IE window.chrome, IE раньше возвращал undefined теперь возвращается true, Но знаете что, IE11 теперь снова возвращает undefined. IE11 также возвращает пустую строку "" за window.navigator.vendor,

Надеюсь, это поможет!

ОБНОВИТЬ:

Спасибо Halcyon991 за указание ниже, что новая Opera 18+ также выводит значение true для window.chrome, Похоже, что Opera 18 основана на Chromium 31. Поэтому я добавил проверку, чтобы убедиться, что window.navigator.vendor является: "Google Inc" и не является "Opera Software ASA", Также спасибо Ring и Adrien Be за то, что Chrome 33 больше не возвращается... window.chrome теперь проверяет, если не ноль. Но внимательно следите за IE11, я добавил чек на undefined так как IE11 теперь выводит undefined, как это было при первом выпуске.. затем после некоторых сборок обновлений он выводится на true.. теперь выводится последнее обновление сборки undefined снова. Microsoft не может решить это!

ОБНОВЛЕНИЕ 24.07.2015 - дополнение для проверки Opera

Опера 30 была только что выпущена. Больше не выводит window.opera, А также window.chrome выводит значение true в новой Opera 30. Поэтому вы должны проверить, есть ли OPR в userAgent. Я обновил свое условие выше, чтобы учесть это новое изменение в Opera 30, поскольку оно использует тот же движок рендеринга, что и Google Chrome.

ОБНОВЛЕНИЕ 13.10.2015 - дополнение для проверки IE

Добавлена ​​проверка IE Edge из-за его вывода true за window.chrome.. хотя IE11 выводит undefined за window.chrome, Спасибо artfulhacker, что artfulhacker нам об этом!

ОБНОВЛЕНИЕ 5/5/2016 - дополнение для проверки iOS Chrome

Добавлена ​​проверка для iOS Chrome check CriOS благодаря этому вывод true для Chrome на iOS. Спасибо xinthose за сообщение об этом!

ОБНОВЛЕНИЕ 18/18/2018 - изменение для проверки Opera

Отредактированная проверка для Opera, проверка window.opr не является undefined с тех пор Chrome 66 имеет OPR в window.navigator.vendor, Спасибо Frosty Z и Daniel Wallman за сообщение об этом!

Answer 3

Гораздо проще решение просто использовать:

var isChrome = !!window.chrome;

!! просто преобразует объект в логическое значение. В браузерах без Chrome это свойство будет undefined, что не соответствует действительности.

Answer 4

Еще короче var is_chrome = /chrome/i.test( navigator.userAgent );

Answer 5

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

Answer 6

As of Chrome 89 (March 2021), all earlier answers are obsolete. Chrome now supports User Agent Hints. So now this should be done using:

      navigator.userAgentData?.brands?.some(b => b.brand === 'Google Chrome')

Or, if you're not using Babel:

      navigator.userAgentData && navigator.userAgentData.brands && navigator.userAgentData.brands.some(b => b.brand === 'Google Chrome')

This returns true for Chrome 89 and above, false for the latest Opera and Edge, and undefined for browsers that don't support userAgentData.

Answer 7

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

Answer 8

Вы также можете захотеть конкретную версию Chrome:

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

Извиняюсь перед Большим Лебовски за использование его ответа в моем.

Answer 9

Ты можешь использовать:

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

Работает на v.71

Answer 10

Есть несколько дополнительных свойств окна, которые можно использовать при обнаружении браузера. Одно из них - необязательное свойство (Chromium), а другое - необязательное. opr свойство (Opera).

Если в браузере есть необязательный chromeсвойство объекта Window, это означает, что браузер является браузером Chromium. Раньше в большинстве случаев это означало Chrome, но в наши дни многие браузеры построены на Chromium (включая Edge и Opera), поэтому только проверка наличия свойства не поможет конкретно обнаружить браузеры Chrome.

Затем часто бывает несколько пользовательских агентов для разных версий браузеров (Edg или Edge) или операционных систем (EdgiOS, ChriOS и FxiOS).

Я использую следующую логику и тестировал множество случаев (обычные пользовательские агенты):

      const GOOGLE_VENDOR_NAME = 'Google Inc.';

function isOpera(){
  return Boolean(window.opr);
}

function isChromium() {
  return Boolean(window.chrome);
}

function getBrowserName() {
  const userAgent = window.navigator.userAgent;
  const vendor = window.navigator.vendor;
  switch (true) {
    case /Edge|Edg|EdgiOS/.test(userAgent):
      return 'Edge';
    case /OPR|Opera/.test(userAgent) && isOpera():
      return 'Opera';
    case /Chrome|CriOS/.test(userAgent) && vendor === GOOGLE_VENDOR_NAME && isChromium():
      return 'Chrome';
    case /Vivaldi/.test(userAgent):
      return 'Vivaldi';
    case /YaBrowser/.test(userAgent):
      return 'Yandex';
    case /Firefox|FxiOS/.test(userAgent):
      return 'Firefox';
    case /Safari/.test(userAgent):
      return 'Safari';
    case /MSIE|Trident/.test(userAgent):
      return 'Internet Explorer';
    default:
      return 'Unknown';
  }
}

function isChrome() {
  const name = getBrowserName();
  return name === 'Chrome';
}

Вы можете найти этот упрощенный код в этой скрипке:

Хитрость заключается в том, чтобы сначала протестировать другие браузеры, а не Chrome (Edge, Opera). Во всех этих случаях в переключателе различные возможные идентификаторы браузера объединяются в одно регулярное выражение и проверяются по строке пользовательского агента. Для Chrome и Opera добавлены дополнительные тесты для свойства окна, а для Chrome мы также проверяем, соответствует ли имя поставщика ожидаемому значению.

---

Примечание: я тестировал множество различных пользовательских агентов, но не буду здесь утверждать, что это решение безупречно. Любые предложения по улучшениям или сбои в обнаружении браузером приветствуются, поэтому я могу улучшить этот код.

Answer 11

У меня работает на Chrome на Mac. Кажется, будет или проще, или более надежным (в случае проверки строки userAgent), чем все выше.

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

Answer 12

Чтобы проверить, является ли браузер Google Chrome:

var isChrome = navigator.userAgent.includes("Chrome") && navigator.vendor.includes("Google Inc");

console.log(navigator.vendor);
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36 "

console.log(navigator.userAgent); 
// "Google Inc."

Answer 13

По состоянию на июнь 2021 года это обнаруживает Chrome. Но через неделю, месяц, год в какой-то момент перестанет работать, но основной принцип останется. Сначала проверьте браузер userAgent, затем проверьте функцию, уникальную только для этого браузера.

Вот сценарий, который определяет между Chrome и Brave и Opera. Все используют один и тот же движок, но так уж получилось, что объект window.navigator.plugins.length имеет разную длину по умолчанию для каждого браузера.

Я не вижу никакого смысла в обнаружении браузера, если только он не предназначен для цифрового отпечатка пальца (или не знает, как этого избежать), а при разработке для Интернета это должны быть функции, которые мы обнаруживаем, а не дискриминируем пользователя при выборе любой конкретный браузер. Верно?

Чтобы подделать userAgent, вы можете использовать любую надстройку или расширение, но это не убережет вас от обнаружения функций. Например, в этом примере я мог бы определить "window.navigator.plugins.length" как 4 и предсказать, что вы, вероятно, используете Brave, даже если ваш userAgent говорит мне иное.

Причина для обнаружения UserAgent первого, это , что означает , что человек не подмены, и , следовательно, можно обнаружить , кто на самом деле является подменой, который также может быть использован для отпечатка пальца.

Answer 14

Пользователь может изменить пользовательский агент. Попробуйте проверить на webkit свойство с префиксом в style объект body элемент

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

Answer 15

Чтобы узнать названия различных настольных браузеров (Firefox, IE, Opera, Edge, Chrome). Кроме сафари.

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;
}

Работает в следующих версиях браузера:

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)

Посмотреть суть здесь и скрипка здесь

Оригинальный фрагмент кода больше не работает для Chrome, и я забыл, где я его нашел. Раньше у него было сафари, но у меня больше нет доступа к сафари, поэтому я больше не могу проверить.

Только Firefox и IE коды были частью оригинального фрагмента.

Проверять Opera, Edge и Chrome просто. У них есть различия в userAgent. OPR существует только в опере. Edge существует только в Edge. Таким образом, чтобы проверить Chrome, эти строки не должны быть там.

Что касается Firefox и IE, я не могу объяснить, что они делают.

Я буду добавлять эту функциональность в пакет, который я пишу

Answer 16

Лучшее решение, которое я нашел, и которое дает истинное или ложное значение в большинстве браузеров:

      var isChrome = (navigator.userAgent.indexOf("Chrome") != -1 && navigator.vendor.indexOf("Google Inc") != -1)

С использованием .indexOf вместо .includesделает его более совместимым с браузером. Несмотря на то, что (или потому что) все дело в том, чтобы сделать ваш код специфичным для браузера, вам нужно, чтобы условие работало в большинстве (или во всех) браузерах.

Answer 17

теперь вы можете использовать navigator.userAgent.includes("Chrome")

Answer 18

Проверьте это: Как обнаружить браузер Safari, Chrome, IE, Firefox и Opera?

В вашем случае: var isChrome =!!window.chrome && (!!window.chrome.webstore ||!!window.chrome.runtime);

Answer 19

var is_chrome = browseris.chrome

или проверьте в других браузерах:

browseris.firefox
browseris.ie
browseris.safari

и также вы можете проверить версию, например browseris.chrome7up и так далее.

проверьте всю существующую информацию в объекте browseris

Answer 20

Все ответы неверны. "Опера" и "Хром" одинаковы во всех случаях.

(отредактированная часть)

вот правильный ответ

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