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

Question

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

我如何创建这样的功能？

Answer 1

要检查浏览器是否为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再次输出.微软无法弥补它的想法!

更新 2015年7月24日 - Opera检查的补充

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

更新 2015年10月13日 - IE检查的补充

增加了检查IE边缘,由于其输出true为window.chrome..即使IE11输出undefined的window.chrome.感谢artfulhacker让我们知道这件事!

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

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

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

编辑检查Opera,检查window.opr是不是undefined从现在Chrome 66已经OPR进入window.navigator.vendor.感谢Frosty Z和Daniel Wallman举报此事!

Answer 2

更新:请参阅Jonathan的答案,了解更新方法.下面的答案可能仍然有效,但它可能会在其他浏览器中引发一些误报.

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

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

Answer 3

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

Answer 4

一个更简单的解决方案就是使用:

var isChrome = !!window.chrome;

在!!刚刚转换的对象为布尔值.在非Chrome浏览器中,此属性将undefined是不真实的.

Answer 5

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

Answer 6

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

Answer 7

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