当前位置：文江博客话题详情

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

发布于 2024-10-09 18:07:24 字数 131 浏览 9 评论 0原文

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

我如何创建这样的功能？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花开柳相依 2024-10-16 18:07:24

要检查浏览器是否为 Google Chrome，请尝试以下操作（更新于 7/18/2024）：

// 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 isFirefox = winNav.userAgent.indexOf("Firefox") > -1;
var isIEedge = winNav.userAgent.indexOf("Edg") > -1;
var isIOSChrome = winNav.userAgent.match("CriOS");
var isGoogleChrome = (typeof winNav.userAgentData !== "undefined") ? winNav.userAgentData.brands[2].brand === "Google Chrome" :  vendorName === "Google Inc.";

if (isIOSChrome) {
   // is Google Chrome on IOS
} else if(
  isChromium !== null &&
  typeof isChromium !== "undefined" &&
  vendorName === "Google Inc." &&
  isOpera === false &&
  isIEedge === false &&
  isGoogleChrome
) {
   // is Google Chrome
} else { 
   // not Google Chrome 
}

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

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

您不能再使用严格等于 true 来检查 IE 中的 window.chrome。 IE 过去返回undefined，现在返回true。 但猜猜看，IE11 现在再次返回 undefined。 IE11 还为 window.navigator.vendor 返回一个空字符串 ""。

更新：

感谢Halcyon991在下面指出，新的 Opera 18+ 也输出对于 window.chrome 为 true。看起来 Opera 18 是基于 Chromium 31 的。因此，我添加了一项检查，以确保 window.navigator.vendor 是：“Google Inc”，而不是“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。并且在新的 Opera 30 中 window.chrome 输出为 true。因此您必须检查 OPR 是否在 userAgent 中。我更新了上面的条件以考虑 Opera 30 中的这一新变化，因为它使用与 Google Chrome 相同的渲染引擎。

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

添加了对 IE Edge 的检查，因为它为 window.chrome 输出 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 不是未定义，因为现在 Chrome 66 已< window.navigator.vendor 中的代码>OPR。感谢 Frosty Z 和丹尼尔·沃尔曼举报了这一点！

更新 2024 年 6 月 10 日 - Google Chrome 浏览器品牌检查的更改

添加了额外检查，因为 Google 在 中添加了 window.navigator.userAgentData.brands 数组useragent

更新 2024 年 7 月 18 日 - Google Chrome 浏览器品牌检查更改

修改 Google Chrome 检查 (isGoogleChrome) 以考虑 userAgentData 品牌数组发生变化，并且如果 userAgentData 不存在于非 Google Chrome 浏览器中，则不会触发 undefined。还添加了不 Firefox 检查。

To check if browser is Google Chrome, try this (updated 7/18/2024):

// 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 isFirefox = winNav.userAgent.indexOf("Firefox") > -1;
var isIEedge = winNav.userAgent.indexOf("Edg") > -1;
var isIOSChrome = winNav.userAgent.match("CriOS");
var isGoogleChrome = (typeof winNav.userAgentData !== "undefined") ? winNav.userAgentData.brands[2].brand === "Google Chrome" :  vendorName === "Google Inc.";

if (isIOSChrome) {
   // is Google Chrome on IOS
} else if(
  isChromium !== null &&
  typeof isChromium !== "undefined" &&
  vendorName === "Google Inc." &&
  isOpera === false &&
  isIEedge === false &&
  isGoogleChrome
) {
   // is Google Chrome
} else { 
   // not Google Chrome 
}

Example of use: https://codepen.io/jonathan/pen/RwQXZxJ?editors=1111

The reason this works is because if you use the Google Chrome inspector and go to the console tab. Type 'window' and press enter. Then you be able to view the DOM properties for the 'window object'. When you collapse the object you can view all the properties, including the 'chrome' property.

You can't use strictly equals true anymore to check in IE for window.chrome. IE used to return undefined, now it returns true. But guess what, IE11 now returns undefined again. IE11 also returns a empty string "" for window.navigator.vendor.

UPDATE:

Thank you to Halcyon991 for pointing out below, that the new Opera 18+ also outputs to true for window.chrome. Looks like Opera 18 is based on Chromium 31. So I added a check to make sure the window.navigator.vendor is: "Google Inc" and not is "Opera Software ASA". Also thanks to Ring and Adrien Be for the heads up about Chrome 33 not returning true anymore... window.chrome now checks if not null. But play close attention to IE11, I added the check back for undefined since IE11 now outputs undefined, like it did when first released.. then after some update builds it outputted to true .. now recent update build is outputting undefined again. Microsoft can't make up it's mind!

UPDATE 7/24/2015 - addition for Opera check

Opera 30 was just released. It no longer outputs window.opera. And also window.chrome outputs to true in the new Opera 30. So you must check if OPR is in the userAgent. I updated my condition above to account for this new change in Opera 30, since it uses same render engine as Google Chrome.

UPDATE 10/13/2015 - addition for IE check

Added check for IE Edge due to it outputting true for window.chrome .. even though IE11 outputs undefined for window.chrome. Thanks to artfulhacker for letting us know about this!

UPDATE 2/5/2016 - addition for iOS Chrome check

Added check for iOS Chrome check CriOS due to it outputting true for Chrome on iOS. Thanks to xinthose for letting us know about this!

UPDATE 4/18/2018 - change for Opera check

Edited check for Opera, checking window.opr is not undefined since now Chrome 66 has OPR in window.navigator.vendor. Thanks to Frosty Z and Daniel Wallman for reporting this!

UPDATE 6/10/2024 - change for Google Chrome browser brand check

Added extra check for if Google Chrome since Google added window.navigator.userAgentData.brands array in useragent

UPDATE 7/18/2024 - change for Google Chrome browser brand check

Modified if Google Chrome check (isGoogleChrome) to account for userAgentData brands array change and if userAgentData does not existing in non google Chrome Browsers so it doesnt trigger undefined. Also added not Firefox check.

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（19）

更新：

UPDATE:

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。