我需要一些返回布尔值的函数来检查浏览器是否为Chrome。
我如何创建这样的功能?
我需要一些返回布尔值的函数来检查浏览器是否为Chrome。
我如何创建这样的功能?
要检查浏览器是否为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.vendor
is:"Google Inc"
和 not is "Opera Software ASA"
。还要感谢Ring和Adrien 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 的检查,因为它输出true
为window.chrome
.. 即使 IE11 输出undefined
为window.chrome
. 感谢artfulhacker让我们知道这一点!
2016 年 2 月 5 日更新- 添加 iOS Chrome 检查
添加了对 iOS Chrome 检查的检查,CriOS
因为它true
在 iOS 上为 Chrome输出。感谢xinthose让我们知道这件事!
2018 年 4 月 18 日更新- Opera 检查的更改
编辑了 Opera 的检查window.opr
,undefined
因为现在 Chrome 66 已经OPR
在window.navigator.vendor
. 感谢Frosty Z和Daniel Wallman报告此事!
更新:请参阅乔纳森的回答以获取处理此问题的更新方法。下面的答案可能仍然有效,但它可能会在其他浏览器中触发一些误报。
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
但是,如前所述,用户代理可能会被欺骗,因此在处理这些问题时,最好始终使用特征检测(例如Modernizer),正如其他答案所述。
甚至更短: var is_chrome = /chrome/i.test( navigator.userAgent );
如果您想检测 Chrome 的渲染引擎(因此不是 Google Chrome 或 Chromium 中的特定功能),一个简单的选项是:
var isChrome = !!window.chrome;
注意:这也true
适用于许多基于 Chrome 的 Edge、Opera 等版本(感谢 @Carrm 指出这一点)。避免这种情况是一场持续的战斗(见window.opr
下文),因此您应该问问自己,您是否正在尝试检测渲染引擎(2020 年几乎所有主要现代浏览器都使用)或其他一些 Chrome(或 Chromium?)特定功能。
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, ' '));