JavaScript:如何确定用户浏览器是否为 Chrome?

IT技术 javascript html google-chrome browser-detection
2021-01-10 15:39:34

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

我如何创建这样的功能?

6个回答

要检查浏览器是否为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 检查器并转到控制台选项卡。输入“窗口”并按回车键。然后您就可以查看“窗口对象”的 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"和 not is "Opera Software ASA"还要感谢RingAdrien Be关于 Chrome 33 不再返回 true 的提醒......window.chrome现在检查是否不为 null。但是密切关注 IE11,我添加了检查,undefined因为 IE11 现在输出undefined,就像第一次发布时一样.. 然后在一些更新版本之后它输出到true.. 现在最近的更新版本undefined再次输出微软拿不定主意!

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

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

更新10/13/2015 - 添加 IE 检查

添加了对 IE Edge 的检查,因为它输出truewindow.chrome.. 即使 IE11 输出undefinedwindow.chrome. 感谢artfulhacker让我们知道这一点!

2016 年 2 月 5 日更新- 添加 iOS Chrome 检查

添加了对 iOS Chrome 检查的检查,CriOS因为它true在 iOS 上为 Chrome输出感谢xinthose让我们知道这件事!

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

编辑了 Opera 的检查window.oprundefined因为现在 Chrome 66 已经OPRwindow.navigator.vendor. 感谢Frosty ZDaniel Wallman报告此事!

谢谢@xinthose .. 我刚刚添加了对 IOS Chrome 的检查.. 非常感谢!:)
2021-03-17 15:39:34
最新的 Edge 用户代理值实际上Edg不是Edge(另请参阅这些文档:docs.microsoft.com/en-us/microsoft-edge/web-platform/...)。所以也许这行:inNav.userAgent.indexOf("Edge")应该改为inNav.userAgent.indexOf("Edg").
2021-03-21 15:39:34
var isGoogleChrome = window.chrome != null && window.navigator.vendor === "Google Inc.";
2021-03-23 15:39:34
感谢@FrostyZ 和@DanielWallman 让我们知道。我修复了它,所以 Opera 检查window.opris not undefined
2021-03-26 15:39:34
也许这里的问题与 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
2021-03-31 15:39:34

更新:请参阅乔纳森的回答以获取处理此问题的更新方法。下面的答案可能仍然有效,但它可能会在其他浏览器中触发一些误报。

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

但是,如前所述,用户代理可能会被欺骗,因此在处理这些问题时,最好始终使用特征检测(例如Modernizer),正如其他答案所述。

由于很多浏览器在此返回true,这是我使用的代码,其中排除了Edge、Maxthon、iOS safari ...等 var is_chrome = ((navigator.userAgent.toLowerCase().indexOf('chrome') > -1) &&(navigator.vendor.toLowerCase().indexOf("google") > -1));
2021-03-18 15:39:34
@Serg 因为他们没有 Chrome。它只是 iOS Safari 的一个皮肤。
2021-03-19 15:39:34
谢谢,虽然你的变量名应该是驼峰式的
2021-03-25 15:39:34
Opera(至少版本 42)返回Google Incnavigator.vendor,所以这个方法不是防弹的,像/Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/OPR/.test(navigator.userAgent)这样的东西可能会更好
2021-04-03 15:39:34
true在 Microsoft Edge 中返回
2021-04-10 15:39:34

甚至更短: var is_chrome = /chrome/i.test( navigator.userAgent );

true在 Microsoft Edge 中返回
2021-04-04 15:39:34

如果您想检测 Chrome 的渲染引擎(因此不是 Google Chrome 或 Chromium 中的特定功能),一个简单的选项是:

var isChrome = !!window.chrome;

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

你也许可以跳过!!

Opera 实际上返回truewindow.chrome. 查看具有防弹检测 + 修复功能的 conditionizr.com。
2021-03-14 15:39:34
好吧,虽然 Opera 基本上是 Chrome
2021-03-14 15:39:34
这也true为 Edge返回
2021-03-31 15:39:34
@vishalsharma,!!将值转换为truefalsetypeof(window.chrome)"object",而typeof(!!window.chrome)"boolean"您的代码示例也可以工作,因为该if语句会进行转换。
2021-04-06 15:39:34
我就是不明白为什么两次!!, 你可以直接使用 , if(chrome){ }
2021-04-07 15:39:34

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."在 Edge 上也是如此(至少 v.89),所以使用你的代码 Edge 也会显示为 Chrome 并isEdge变为 false(基于 Chromium 的 Edge 浏览器的用户代理是Edg)。
2021-03-18 15:39:34
不幸的是,navigator.vendor === "Google Inc." 在 Opera(至少 v.49)上,因此使用您的代码 Opera 显示为 Chrome。
2021-03-27 15:39:34
没有解释,没有关于假阳性/阴性的迹象,只是在这里转储了一段代码......这个回应真的应该被否决。它甚至不是对所问问题的答案。
2021-03-28 15:39:34
在世界上的某个地方,每一个我们实际上并不需要的正则表达式都会有一只小猫死去。
2021-04-06 15:39:34