JavaScript:如何找出用户浏览器是否为Chrome?
我需要一些函数返回一个布尔值来检查浏览器是否是Chrome 。
我如何创build这样的function?
更新:请参阅乔纳森的答案更新的方式来处理这个。 下面的答案可能仍然有效,但可能会在其他浏览器中引发一些误报。
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
但是,如上所述,用户代理可能会被欺骗,因此在处理这些问题时最好使用function检测(例如Modernizer ),如其他答案所述。
要检查浏览器是否为Google Chrome ,请尝试以下操作:
// please note, // that IE11 now returns undefined again for window.chrome // and new Opera 30 outputs true for window.chrome // 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, winNav = window.navigator, vendorName = winNav.vendor, isOpera = winNav.userAgent.indexOf("OPR") > -1, isIEedge = winNav.userAgent.indexOf("Edge") > -1, 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
或者等价的方法:
function isChrome() { var isChromium = window.chrome, winNav = window.navigator, vendorName = winNav.vendor, isOpera = winNav.userAgent.indexOf("OPR") > -1, isIEedge = winNav.userAgent.indexOf("Edge") > -1, isIOSChrome = winNav.userAgent.match("CriOS"); if (isIOSChrome) { return true; } else if ( isChromium !== null && typeof isChromium !== "undefined" && vendorName === "Google Inc." && isOpera === false && isIEedge === false ) { return true; } else { return false; } }
这使用function/对象属性检测,最好的办法! 这是因为如果您使用Google Chrome检查器并转到控制台选项卡。 input“窗口”,然后按回车。 然后您就可以查看“窗口对象”的DOM属性。 当你折叠对象时,你可以查看所有的属性,包括'chrome'属性。
你不能再使用严格的等于true来检查IE的window.chrome
。 IE用来返回undefined
,现在它返回true
。 但是猜猜看,IE11现在再次返回undefined。 IE11也为window.navigator.vendor
返回一个空string""
。
我希望这有帮助!
更新:
感谢Halcyon991指出下面,新的Opera 18+也输出为true的window.chrome
。 看起来Opera 18基于Chromium 31 。 所以我添加了一个检查来确保window.navigator.vendor
是: "Google Inc"
而不是"Opera Software ASA"
。 还要感谢Ring和Adrien是为了提高Chrome 33的性能而不再返回真实状态… window.chrome
现在检查是否为空。 但密切关注IE11,我添加了检查undefined
因为IE11现在输出undefined
,就像它第一次发布时,然后在一些更新后build立它输出为true
..现在最近更新构build输出undefined
了。 微软无法弥补这一点!
更新 7/24/2015 – 除了Opera检查
Opera 30刚刚发布。 它不再输出window.opera
。 而且在新的Opera 30中window.chrome
输出也是true。所以你必须检查OPR是否在userAgent中 。 我更新了上面的条件,以说明Opera 30中的这一新变化,因为它使用与Google Chrome相同的渲染引擎。
更新 10/13/2015 – 增加IE浏览器检查
IE浏览器边缘添加检查,因为它输出为window.chrome
true
的即使IE11输出undefined
的window.chrome
。 感谢artfulhacker让我们知道这个!
更新 2/5/2016 – iOS Chrome浏览器检查的补充
增加了对iOS Chrome的支票检查CriOS
因为它在iOS上为Chrome输出了true
。 感谢xinthose让我们知道这个!
甚至更短: var is_chrome = /chrome/i.test( navigator.userAgent );
一个更简单的解决scheme就是使用:
var isChrome = !!window.chrome;
!!
只是将对象转换为布尔值。 在非Chrome浏览器中,此属性将是undefined
,这不是真的。
var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
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, ' '));
您可能还需要特定版本的Chrome:
var ua = navigator.userAgent; if(/chrome/i.test(ua)) { var uaArray = ua.split(' ') , version = uaArray[uaArray.length - 2].substr(7); }
对大Lebowski在我的内部使用他的答案抱歉。
用户可以更改用户代理。 尝试testingbody
元素的style
对象中的webkit
前缀属性
if ("webkitAppearance" in document.body.style) { // do stuff }
所有的答案都是错的。 “Opera”和“Chrome”在所有情况下都是相同的。
(编辑部分)
这是正确的答案
if (window.chrome && window.chrome.webstore) { // this is Chrome }