logo标签列表

JavaScript：如何判断用户的浏览器是否为Chrome？

javascripthtmlgoogle-chromebrowser-detection
273
我需要一些返回布尔值的函数，用于检查浏览器是否为Chrome。如何创建此功能？
17
你确定你不想做特征检测吗？（即询问“这个能做我需要的吗？”而不是“这是Chrome吗？”） - bdukes
51
谁知道呢？他可能想让用户下载一个谷歌浏览器扩展。 - naveen
2
这个问题突显了用户代理检测的难题。仅仅三年后，Fun 3D Box Background 就在我那款低端手机上能（试图）在 Chrome 中加载了，但是在我那台高端台式电脑上的 Firefox 却不会尝试加载。 - Álvaro González
5
我同意特性检测是正确的方法。但有些情况下你需要检测特定的内容，比如我想只在 Chrome 中进行 monkey patching xhr.sendAsBinary。我的初始解决方案是检查 filereader.readasbinary 是否被实现。然而，我遇到了问题，它也会在某些移动浏览器中进行 patching，导致上传失败。我只想让这个修复针对 Chrome。 - frostymarvelous
4
想知道为什么了解浏览器是否是Chrome很重要吗？ Chrome不能加载RSS订阅，你知道吗？所以你可以提供警告或重定向用户，而不是链接到一个在Chrome中无法加载的RSS订阅。 这都怪你，Google Chrome... - Pic Mickael
显示剩余9条评论
19个回答
369

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

使用示例：https://codepen.io/jonathan/pen/RwQXZxJ?editors=1111

之所以能够正常工作，是因为如果您使用Google Chrome检查器并转到控制台选项卡，则可以输入“window”并按Enter键。然后，您就能够查看“window对象”的DOM属性。当您折叠该对象时，您可以查看所有属性，包括“chrome”属性。

您不能再使用严格相等来检查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不再返回true...现在window.chrome检查是否为非空。但要特别注意IE11，我重新添加了对undefined的检查，因为IE11现在输出undefined，就像它首次发布时一样...然后在一些更新版本之后，它输出true..现在最近的更新版本又输出undefined了。微软无法下定决心！

更新7/24/2015-添加了Opera的检查

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

更新10/13/2015 - IE检查补充

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

更新2/5/2016 - iOS Chrome检查补充

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

更新 2018年4月18日 - Opera检查更改

编辑了对Opera的检查，检查window.opr不是undefined，因为现在Chrome 66在window.navigator.vendor中有OPR。感谢Frosty Z和Daniel Wallman的报告！

3
判断当前浏览器是否为谷歌浏览器： var isGoogleChrome = window.chrome != null && window.navigator.vendor === "Google Inc."; - Ring
1
谢谢@xinthose，我刚刚添加了一个iOS Chrome的检查..非常感激！ :) - Jonathan Marzullo
2
也许和Daniel Wallman遇到的问题一样：我的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。 - Maxime Pacary
2
感谢@FrostyZ和@DanielWallman的反馈。我已经修复了这个问题，现在Opera会检查window.opr是否未定义。 - Jonathan Marzullo
7
最新的 Edge 用户代理值实际上是 Edg 而不是 Edge（请参见这些文档：https://learn.microsoft.com/en-us/microsoft-edge/web-platform/user-agent-string）。因此，也许这一行：`inNav.userAgent.indexOf("Edge")` 应该改为 inNav.userAgent.indexOf("Edg")。 - Wilt
显示剩余26条评论
228

更新：请参阅Jonathan的答案，以获得一种更新的处理方式。下面的答案可能仍然有效，但在其他浏览器中可能会触发一些误报。

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

然而，正如所提到的，用户代理可以被伪造，因此在处理这些问题时，最好始终使用功能检测（例如Modernizer），正如其他答案所提到的。

7
因为他们没有 Chrome 浏览器，所以它只是 iOS Safari 的外皮。 - Poetro
2
谢谢，不过你的变量名应该是驼峰式命名。 - Dimitri Kopriwa
5
在微软 Edge 浏览器中返回 true。 - Cobby
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)的方法可能会更好地工作。 - yorch
显示剩余13条评论
22

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

var isChrome = !!window.chrome;

注意：这也会返回对于基于Chrome的Edge、Opera等许多浏览器版本（感谢@Carrm指出）。避免这种情况是一场持续的战斗（请参见下文中的window.opr），因此您应该思考是否要检测渲染引擎（几乎所有2020年主要现代浏览器都使用）还是其他Chrome（或Chromium？）专用功能。

而且，您可能可以跳过!!

6
实际上，Opera将window.chrome返回为true。请查看conditionizr.com，该网站具有可靠的检测和修复功能。 - Stephen Jenkins
7
嗯，Opera基本上就是Chrome的变种。 - Karel Bílek
3
@vishalsharma，“!!”将值转换为“true”或“false”。typeof(window.chrome)返回“object”，而typeof(!!window.chrome)返回“boolean”。你的代码示例也有效，因为“if”语句执行了转换。 - Drew Noakes
@Chris 在 iOS 上失败是因为无法使用 Blink，这里使用的是 WebKit，所以需要回退到 用户代理。然而，从支持的角度来看，您可能不希望将其视为 Google Chrome，因为它是 WebKit 而不是 Blink。 - Daniel Imms
3
这也适用于 Edge，返回值为“true”。 - Carrm
显示剩余5条评论
20

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

40
在 Microsoft Edge 中返回 true。 - Cobby
在Opera上返回true。 - Gagik
这是一种非常错误的方法... - Richardson
17

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

2
不幸的是，在Opera（至少在v.49上），navigator.vendor ===“Google Inc.”，因此使用您的代码，Opera会显示为Chrome。 - Wojtek Majerski
18
世界上每当我们使用不必要的正则表达式时，就会有一只小猫咪离开人世。 - Sz.
2
这个回答应该被点踩。它甚至不是对所问问题的回答，只是一个代码片段。 - Alexandre Germain
不幸的是，在Edge浏览器上（至少在v.89），navigator.vendor ===“ Google Inc。”，因此使用您的代码时，Edge也会显示为Chrome，并且isEdge将变为false（基于Chromium的Edge浏览器的用户代理是“ Edg”）。 - Wilt
13

截至2021年3月Chrome 89版本，所有先前的答案都已过时。Chrome现在支持用户代理提示（User Agent Hints）。因此，现在应该使用以下方式：

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的浏览器返回未定义。

这很好，因为navigator.userAgentData.brands实际上返回浏览器品牌。其他答案的问题在于它们对基于Chromium的浏览器（如Edge）返回true。 - TEK
9

var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );~
这是一个旧的答案，写于12年前；截至目前（即2022年8月）

更新（2022年8月）：

现在，使用用户代理进行浏览器检测（用户代理嗅探）通常是不好的做法。应该采用特性检测。

参考：使用用户代理进行浏览器检测

然而，如果你仍然希望这样做，可以使用第三方库，比如

var parser = new UAParser();
var result = parser.getResult();

console.log(result.browser);// {name: "Chrome", version: "104.0.0.0", "major": "104"}
console.log(result.device); // {model: undefined, type: undefined, vendor: undefined}
console.log(result.os);     // {name: "Windows", version: "10"}
console.log(result.engine); // {name: "Blink", version: "104.0.0.0"}
console.log(result.cpu);    // {"architecture": "amd64"}
<script 
  src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/1.0.2/ua-parser.min.js">
</script>

上面的代码片段使用了库ua-parser-js。
  1. CDN - https://cdnjs.com/libraries/UAParser.js
  2. npm - https://www.npmjs.com/package/ua-parser-js
请注意，UA嗅探是不好的实践，尽可能使用特性检测。
4
我很喜欢这个，记得你也可以用 var is_chrome = /chrome/i.test(navigator.userAgent); - AlanFoster
16
在微软 Edge 浏览器中返回 true。 - Cobby
@Cobby：恕我直言，当时Edge浏览器还未发布。感谢提供信息 :) - naveen
在Opera上返回true。 - Gagik
3

如果你足够勇敢，可以尝试使用浏览器嗅探来获得一个版本：

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

检测到的版本可能是Chrome版本、Edge版本或其他版本。但是，浏览器插件可以轻易更改用户代理和平台等其他信息，因此不建议这样做。

向《大白杨》致歉，因为我在我的答案中使用了他的回答。

6
在微软 Edge 浏览器中，版本号为“537.36”。 - Cobby
3

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

如果浏览器的窗口对象上有可选的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';
}

您可以在这个示例中找到这个简化后的代码：

诀窍是首先针对其他浏览器（如Edge、Opera）进行测试。在所有这些情况下，将不同可能的浏览器标识符组合成一个正则表达式，并针对用户代理字符串进行测试。对于Chrome和Opera，还添加了关于window属性的额外测试，对于Chrome，我们还检查供应商名称是否与预期值匹配。

注意：我已经针对许多不同的用户代理进行了测试，但在此不会声称这个解决方案是无缺陷的。欢迎提出改进意见或失败的浏览器检测，以便我进一步改进此代码。

更新:

修复了对iOS上Chrome（用户代理CriOS）检测的漏洞。iOS上的Chrome没有window对象上的chrome: true属性，所以只应测试用户代理字符串的存在。

3

您可以使用：

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

它正在v.71上运行。
navigator.userAgent.includes("Chrome") - Alex Szücs
请注意，这将在Edge Chromium以及Google Chrome上返回true。对于我的用例来说，这是一个积极的结果，但OP可能只针对Google Chrome。 - Jeff Mergler
在Opera上返回true。 - Gagik
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接