javascript - JavaScript：如何判断用户浏览器是否是 Chrome？

Question

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

如何创建这样的功能？

score 350 · Accepted Answer

要检查浏览器是否为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("Edg") > -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+ 也为window.chrome. 看起来Opera 18是基于Chromium 31的。所以我添加了一个检查以确保window.navigator.vendoris:"Google Inc"而不是 is "Opera Software ASA"。还要感谢Ring和Adrien Be对 Chrome 33 不再返回 true 的提醒......window.chrome现在检查是否不为空。但是请密切注意 IE11，我添加了检查，undefined因为 IE11 现在输出undefined，就像它第一次发布时一样。然后在一些更新构建后它输出到true..现在最近的更新构建undefined再次输出。微软拿不定主意！

2015 年 7 月 24 日更新- 添加 Opera 检查

Opera 30 刚刚发布。它不再输出window.opera。并且在新的 Opera 30 中也window.chrome输出为 true。所以你必须检查OPR是否在userAgent中。我更新了上面的条件以说明 Opera 30 中的这一新变化，因为它使用与 Google Chrome 相同的渲染引擎。

更新2015 年 10 月 13 日 - 添加 IE 检查

添加了对 IE Edge 的检查，因为它输出true..即使window.chromeIE11 输出undefined. window.chrome感谢artfulhacker让我们知道这一点！

更新2/5/2016 - 添加 iOS Chrome 检查

添加了对 iOS Chrome 检查的检查，CriOS因为它在 iOS 上为 Chrome 输出true。感谢xinthose让我们知道这一点！

更新4/18/2018 - Opera 检查的更改

对 Opera 进行了编辑检查，window.opr因为undefined现在 Chrome 66 已经OPR在window.navigator.vendor. 感谢Frosty Z和Daniel Wallman的报告！

score 225 · Accepted Answer

更新：请参阅乔纳森的回答以了解处理此问题的更新方法。下面的答案可能仍然有效，但可能会在其他浏览器中引发一些误报。

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

但是，如前所述，用户代理可能会被欺骗，因此在处理这些问题时最好使用特征检测（例如Modernizer），正如其他答案所提到的那样。

score 20 · Accepted Answer

如果您想检测 Chrome 的渲染引擎（因此不是 Google Chrome 或 Chromium 中的特定功能），一个简单的选项是：

var isChrome = !!window.chrome;

注意：这也true适用于许多基于 Chrome 的 Edge、Opera 等版本（感谢@Carrm 指出这一点）。避免这种情况是一场持续的战斗（见window.opr下文），因此您应该问问自己，您是在尝试检测渲染引擎（2020 年几乎所有主要现代浏览器都使用）还是其他一些 Chrome（或 Chromium？）特定功能。

你可能会跳过!!

score 20 · Accepted Answer

20

更短：var is_chrome = /chrome/i.test( navigator.userAgent );

于 2012-05-09T13:57:06.823 回答

score 14 · Accepted Answer

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

score 8 · Accepted Answer

从 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。

score 7 · Accepted Answer

7

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

于 2010-12-30T18:43:35.377 回答

score 3 · Accepted Answer

如果您有勇气，可以尝试浏览器嗅探并获得一个版本：

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

此检测到的版本可能是 Chrome 版本、Edge 版本或其他版本。浏览器插件可以很容易地改变 userAgent 和 platform 和其他东西，所以不推荐这样做。

向 The Big Lebowski 道歉，因为他在我的内部使用了他的答案。

score 3 · Accepted Answer

3

You can use:

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

It is working on v.71

于 2018-12-07T14:30:48.400 回答

score 1 · Accepted Answer

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

如果浏览器chrome在 Window 对象上有 optional 属性，则表示该浏览器是 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，我们还检查供应商名称是否与预期值匹配。

注意： 我针对很多不同的用户代理进行了测试，但不会在这里声称这个解决方案是完美的。欢迎任何改进建议或浏览器检测失败，以便我进一步改进此代码。

更新：

修复了 iOS（用户代理 CriOS）检测 Chrome 的错误。iOS 上的 Chrome 没有chrome: truewindow 对象的属性，因此只能测试用户代理字符串的存在。

score 1 · Accepted Answer

要检查浏览器是否为 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."

score 0 · Accepted Answer

User could change user agent . Try testing for webkit prefixed property in style object of body element

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

score 0 · Accepted Answer

在 Mac 上的 Chrome 上为我工作。似乎比上述所有内容更简单或更可靠（以防 userAgent 字符串测试）。

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

score 0 · Accepted Answer

我找到的最佳解决方案，并且在大多数浏览器中都给出了 true 或 false 是：

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

使用.indexOf而不是.includes使其更兼容浏览器。即使（或因为）重点是使您的代码特定于浏览器，您仍需要该条件才能在大多数（或所有）浏览器中工作。

score 0 · Accepted Answer

了解不同桌面浏览器的名称（Firefox、IE、Opera、Edge、Chrome）。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;
}

适用于以下浏览器版本：

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)

查看要点here和fiddle here

原始代码片段不再适用于 Chrome，我忘记了在哪里找到它。它以前有 safari，但我不再可以访问 safari，所以我无法再验证。

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

Opera、Edge 和 Chrome 的检查很简单。他们在 userAgent 上有区别。OPR仅存在于 Opera 中。Edge仅存在于 Edge 中。因此，要检查 Chrome，这些字符串不应该存在。

至于 Firefox 和 IE，我无法解释它们的作用。

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

score -1 · Accepted Answer

检查这个：如何检测 Safari、Chrome、IE、Firefox 和 Opera 浏览器？

在你的情况下：

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

score -2 · Accepted Answer

var is_chrome = browseris.chrome

或检查其他浏览器：

browseris.firefox
browseris.ie
browseris.safari

并且你可以检查版本等browseris.chrome7up。

检查“browseris”对象中的所有现有信息

score -4 · Accepted Answer

all answers are wrong. "Opera" and "Chrome" are same in all cases.

(edited part)

here is the right answer

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

javascript - JavaScript：如何判断用户浏览器是否是 Chrome？

18 回答 18

更新：

Related

Reference