我需要一些函数返回一个布尔值来检查浏览器是否是Chrome。

我如何创建这样的功能?


当前回答

从Chrome 89(2021年3月)开始,所有以前的答案都已过时。Chrome现在支持用户代理提示。所以现在应该使用:

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

或者,如果你不使用Babel:

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

对于Chrome 89及以上版本返回true,对于最新的Opera和Edge返回false,对于不支持userAgentData的浏览器返回undefined。

其他回答

如果你有勇气,你可以尝试浏览器嗅探,得到一个版本:

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

这个检测到的版本可能是Chrome版本,或者Edge版本,或者其他版本。浏览器插件可以很容易地改变userAgent、平台和其他东西,所以不建议这样做。

向绿脚趾向我道歉,我用了他的答案。

在进行浏览器检测时,可以使用一些可选的窗口属性。其中一个是可选的chrome属性(Chromium),另一个是可选的opr属性(Opera)。

如果浏览器在Window对象上具有可选的chrome属性,则意味着该浏览器是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 /CriOS/.test(userAgent):
    case /Chrome/.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,我们还会对window属性进行额外的测试,对于Chrome,我们还会检查供应商名称是否与预期值匹配。


注意:我针对许多不同的用户代理进行了测试,但这里并不是说这个解决方案是完美无缺的。任何关于改进或失败的浏览器检测的建议都是欢迎的,这样我就可以进一步改进这段代码。


更新:

修复了Chrome在iOS上(用户代理CriOS)检测的错误。iOS上的Chrome在window对象上没有Chrome: true属性,所以应该只测试是否存在用户代理字符串。

更新:请参阅Jonathan的回答,了解处理这个问题的最新方法。下面的答案可能仍然有效,但在其他浏览器中可能会引发一些误报。

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

然而,正如前面提到的,用户代理可能会被欺骗,所以在处理这些问题时,最好使用特征检测(例如Modernizer),正如其他答案所提到的。

检查这个:如何检测Safari, Chrome, IE, Firefox和Opera浏览器?

在你的情况下:

var isChrome = (window.chrome.webstore || window.chrome.runtime) && !!window.chrome;

了解不同桌面浏览器的名称(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浏览器,我忘记了我在哪里找到它。它之前有safari浏览器,但我不再有safari浏览器,所以我不能再验证了。

只有Firefox和IE代码是原始代码片段的一部分。

Opera、Edge和Chrome的检查非常简单。它们在userAgent中存在差异。OPR只存在于Opera中。Edge只存在于Edge中。所以要检查Chrome,这些字符串不应该在那里。

至于Firefox和IE,我无法解释它们的功能。

我将把这个功能添加到我正在编写的包中