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


220

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

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


16
Вы уверены, что не хотите вместо этого выполнять обнаружение функций (вместо того, чтобы спросить «это Chrome?», Спросить «может ли это сделать то, что мне нужно?»)
bdukes,

42
кто знает? он может захотеть, чтобы пользователь скачал расширение chrome
naveen

2
Этот вопрос иллюстрирует проблему обнаружения пользовательского агента. Лишь три года спустя Fun 3D Box Background загрузит (попытается) в Chrome мой недорогой мобильный телефон, но даже не попробует Firefox на моем высококлассном настольном компьютере.
Альваро Гонсалес

5
Я согласен, что обнаружение функций - это путь. но есть законные области, где вы хотели бы обнаружить. Например, я хочу установить патч для xhr.sendAsBinary только для Chrome. мое первоначальное решение проверило, реализован ли filereader.readasbinary. Тем не менее, у меня возникают проблемы, когда он исправляет для некоторых мобильных браузеров, и поэтому загрузка не удается. Я хочу это исправить только для хрома.
морозный

4
Хотите знать, почему может быть уместно узнать, является ли браузер Chrome? Как насчет того, чтобы Chrome не мог загружать RSS-каналы? Чтобы вместо ссылки на RSS-канал, который не удалось загрузить в Chrome, вы могли на самом деле предоставить предупреждение или перенаправить пользователя? Нет, спасибо тебе Google Chrome ...
Pic Микаэль

Ответы:


205

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

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

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


В чем причина использования .toLowerCase - почему бы не просто navigator.userAgent.indexOf ('Chrome')? Я вижу, что многие люди используют его, но я не уверен в этом?
Джон

7
@ Serg, потому что у них нет Chrome. Это только скин вокруг iOS Safari.
Поэтро

2
Спасибо, хотя твое имя должно быть верблюжьим
Дмитрий Коприва

5
Так как многие браузеры при этом возвращают true, вот код, который я использовал, исключая Edge, Maxthon, iOS safari ... и т. Д. var is_chrome = ((navigator.userAgent.toLowerCase().indexOf('chrome') > -1) &&(navigator.vendor.toLowerCase().indexOf("google") > -1));
Alex C.

2
Opera (по крайней мере, версия 42) возвращается Google Incк navigator.vendor, так что этот метод не пуленепробиваемый, что-то вроде /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/OPR/.test(navigator.userAgent)бы, вероятно, будет работать лучше
йорк

314

Чтобы проверить, является ли браузер 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того, что он выводит undefinedдля .. даже если IE11 выводит для window.chrome. Спасибо artfulhacker, что сообщили нам об этом!

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

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

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

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


Это не работает для IE10. typeof window.chrome в IE10 возвращает {объект}
magritte

2
var isGoogleChrome = window.chrome! = null && window.navigator.vendor === "Google Inc.";
Звоните

1
Спасибо @xinthose .. Я только что добавил проверку на IOS Chrome .. очень ценю! :)
Джонатан Марзулло

2
Возможно, та же проблема, что и у Даниэля Уоллмана: мой пользовательский агент Android Chrome содержит строку "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()возвращает false .
Морозный Z

2
Спасибо @FrostyZ и @DanielWallman за то, что сообщили нам об этом. Я исправил это, так что Opera проверяет, window.oprнет undefined.
Джонатан Марзулло


16

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

var isChrome = !!window.chrome;

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

Обратите внимание, что это также возвращает true для версий Edge, основанных на Chrome (спасибо @Carrm за указание на это).


5
Опера на самом деле возвращается trueк window.chrome. Проверьте conditionizr.com, который имеет пуленепробиваемое обнаружение + исправление.
Halcyon991

7
Что ж, Opera - это в основном Chrome
Карел Билек,

Я просто не понимаю, почему два раза! , вы можете напрямую использовать, если (хром) {}
Вишал Шарма

3
@vishalsharma, что !!преобразует значение быть либо trueили false. typeof(window.chrome)дает "object", тогда как typeof(!!window.chrome)дает "boolean". Ваш пример кода также работает, потому что ifоператор выполняет преобразование.
Дрю Ноакс

1
Это также возвращает trueEdge.
Карм

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


К сожалению, navigator.vendor === "Google Inc." в Opera (по крайней мере v.49), поэтому при использовании вашего кода Opera отображается как Chrome.
Войтек Майерски

9
Где-то в мире котенок умирает за каждое регулярное выражение, которое нам на самом деле не нужно.
СЗ

Никаких объяснений, никаких указаний на ложные положительные / отрицательные стороны, просто кусок кода, сброшенный здесь ... Этот ответ действительно должен быть опущен. Это даже не ответ на заданный вопрос.
Александр Жермен

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

3
Мне понравилось, помните, что вы также можете сделать var is_chrome = /chrome/i.test(navigator.userAgent); тоже
AlanFoster

14
Возвращается trueв Microsoft Edge.
Кобби

@Cobby: При всем уважении, Edge не был выпущен в то время. Спасибо за информацию :)
Навин

3

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

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

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


4
Версия находится "537.36"в Microsoft Edge.
Кобби


2

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

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

2
const isChrome = window.chrome && !window.opr;
ifeelbadformyoldquestions

1

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

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

1
В Firefox: ("webkitAnimation" в document.body.style) === true
Томас Прадо,

3
К вашему сведению: «webkitAppearance» больше не работает. Край теперь использует это. Наверное, лучше всего удалить свой ответ. ^^
hexalys


0

Чтобы узнать названия различных настольных браузеров (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, я не могу объяснить, что они делают.

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


-4

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

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

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

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

1
Лучший комментарий, чем ответ.
Джейс Коттон

В случае, если вам интересно, почему вы были модедированы, это просто неправда. Например, они обрабатывают сочетания клавиш и по-разному обращаются к модификаторам клавиш (и они также не могут быть обнаружены).
Zilk

Я не говорю, что «опера» и «хром» - это один и тот же браузер, только значок отличается. Я говорю, что методы, описанные выше, дают одинаковый результат для обоих браузеров.
Арарат Арутюнян

@Zilk Вы тестировали, например, первый ответ, который набрал 66 голосов?
Арарат Арутюнян

9
Это больше не будет работать с Chrome 71. window.chrome.webstoreСейчасundefined
Esteban
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.