我需要一些函数返回一个布尔值来检查浏览器是否为Chrome。
如何创建此类功能？
答案 0 :(得分：284)
要检查浏览器是否为 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+也为window.chrome输出为真。看似 Opera 18 基于 Chromium 31 。所以我添加了一项检查，以确保window.navigator.vendor为："Google Inc"而不是"Opera Software ASA"。还要感谢{3}}和Ring，因为有关Chrome 33的提示不再返回true ... window.chrome现在检查是否为空。但是密切注意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相同的渲染引擎。
更新 2015年10月13日 - IE检查的补充
已添加对IE Edge的检查，因为它为true输出window.chrome ..即使IE11为undefined输出window.chrome。感谢Adrien Be让我们知道这件事！
更新 2016年2月5日 - iOS Chrome检查添加
已添加对iOS Chrome检查CriOS的检查，因为它为iOS上的Chrome输出true。感谢artfulhacker让我们知道这件事！
更新 4/18/2018 - 更改Opera检查
已编辑检查Opera，检查window.opr不是undefined，因为现在Chrome 66在OPR中有window.navigator.vendor。感谢xinthose和Frosty Z报告此内容！
答案 1 :(得分：185)
更新：请参阅Jonathan's answer以获取更新方式来处理此问题。下面的答案可能仍然有效，但它可能会在其他浏览器中引发一些误报。
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
但是，如上所述，用户代理可能会被欺骗，因此在处理这些问题时最好使用功能检测（例如Modernizer），如其他答案所述。
答案 2 :(得分：22)
更短：var is_chrome = /chrome/i.test( navigator.userAgent );
答案 3 :(得分：13)
更简单的解决方案就是使用：
var isChrome = !!window.chrome;
!!只是将对象转换为布尔值。在非Chrome浏览器中，此属性为undefined，这不是真正的。
答案 4 :(得分：13)
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, ' '));
答案 5 :(得分：8)
var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
答案 6 :(得分：2)
您可以使用：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>Header</header>
<div class="slider">
Slider
</div>
<div class="">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
<div class="">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
<div class="">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
<div class="">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
<div class="">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>它正在处理v.71版本
答案 7 :(得分：2)
您可能还需要特定版本的Chrome：
var ua = navigator.userAgent;
if(/chrome/i.test(ua)) {
var uaArray = ua.split(' ')
, version = uaArray[uaArray.length - 2].substr(7);
}
向大Lebowski道歉，在我的内心使用他的答案。
答案 8 :(得分：1)
用户可以更改用户代理。尝试在webkit元素的style对象中测试body前缀属性
if ("webkitAppearance" in document.body.style) {
// do stuff
}
答案 9 :(得分：1)
在进行浏览器检测时可以使用一些可选的窗口属性。其中之一是可选的 chrome 属性 (Chromium)，另一个是可选的 opr 属性 (Opera)。
如果浏览器在 Window 对象上具有可选的 chrome 属性，则表示该浏览器是 Chromium 浏览器。以前这意味着在大多数情况下使用 Chrome，但现在许多浏览器都基于 Chromium（包括 Edge 和 Opera）构建，因此仅检查属性的存在无助于专门检测 Chrome 浏览器。
然后通常会有多个用户代理用于不同的浏览器版本（Edg 或 Edge）或操作系统（EdgiOS、ChriOS 和 FxiOS）。
我使用以下逻辑并针对很多情况（常见用户代理）进行了测试：
const GOOGLE_VENDOR_NAME = 'Google Inc.';
function isOpera(){
return Boolean(window.opr);
}
function isChromium() {
return Boolean(window.chrome);
}
function getBrowserName() {
const userAgent = window.navigator.userAgent;
const vendor = window.navigator.vendor;
switch (true) {
case /Edge|Edg|EdgiOS/.test(userAgent):
return 'Edge';
case /OPR|Opera/.test(userAgent) && isOpera():
return 'Opera';
case /CriOS/.test(userAgent):
case /Chrome/.test(userAgent) && vendor === GOOGLE_VENDOR_NAME && isChromium():
return 'Chrome';
case /Vivaldi/.test(userAgent):
return 'Vivaldi';
case /YaBrowser/.test(userAgent):
return 'Yandex';
case /Firefox|FxiOS/.test(userAgent):
return 'Firefox';
case /Safari/.test(userAgent):
return 'Safari';
case /MSIE|Trident/.test(userAgent):
return 'Internet Explorer';
default:
return 'Unknown';
}
}
function isChrome() {
const name = getBrowserName();
return name === 'Chrome';
}
您可以在 this fiddle 中找到此简化代码：
诀窍是先针对其他浏览器进行测试，然后再针对 Chrome（Edge、Opera）进行测试。在交换机中的所有这些情况下，浏览器的不同可能标识符组合在一个正则表达式中，并针对用户代理字符串进行测试。对于 Chrome 和 Opera，添加了针对 window 属性的额外测试，对于 Chrome，我们还会检查供应商名称是否与预期值匹配。
注意：我针对许多不同的用户代理进行了测试，但我不会在这里声称该解决方案是完美无缺的。欢迎任何改进建议或浏览器检测失败，以便我进一步改进此代码。
修复了 iOS 上的 Chrome（用户代理 CriOS）检测错误。 iOS 上的 Chrome 在 window 对象上没有 chrome: true 属性，因此只应测试用户代理字符串是否存在。
答案 10 :(得分：1)
自 Chrome 89（2021 年 3 月）起，所有较早的答案都已过时。 Chrome 现在支持 User Agent Hints。所以现在这应该使用：
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。
答案 11 :(得分：1)
截至 2021 年 6 月，这会检测到 Chrome。但是在一周、一个月、一年后，它会在某个时候停止工作，但基本本金将保留。首先，检查浏览器 userAgent，然后检查仅该浏览器独有的功能。
这是一个在 Chrome 和 Brave 和 Opera 之间进行检测的脚本。所有人都使用相同的引擎，但碰巧 window.navigator.plugins.length 对象的长度不同，在每个浏览器的默认设置中。
我认为检测浏览器没有任何用处，除非它用于数字指纹（或知道如何避免它），并且在为 Web 开发时，它应该严格是我们检测的功能，而不是歧视用户选择任何特定的浏览器。对吗？
为了欺骗 userAgent，您可以使用任何附加组件或扩展程序，但它不会让您免于检测功能。例如，在此示例中，我可以检测到“window.navigator.plugins.length”为 4 并预测您可能使用 Brave，即使您的 userAgent 告诉我其他情况也是如此。
首先检测 userAgent 的原因是，这意味着该人不是在欺骗，因此可以检测到谁实际上是欺骗，这也可以用于对您进行指纹识别。 >
// Check between Brave, Chome and Opera
window.onload = function detectBraveBrowser() {
try {
console.log(navigator.userAgent);
// First match Chrome uerAgent, since Brave userAgent is identical
if (navigator.userAgent.match(/chrome/i)) {
// Next check feature, Chrome value is 2, Opera 3, Brave 4
if (window.navigator.plugins.length === 4) {
document.getElementById('detection').textContent = 'Brave ';
}
else if (window.navigator.plugins.length === 3) {
document.getElementById('detection').textContent = 'Opera ';
}
else if (window.navigator.plugins.length === 2) {
document.getElementById('detection').textContent = 'Chrome ';
}
} else {
document.getElementById('detection').textContent = 'Unknown';
}
} catch (e) {
// Statement to handle errors
document.getElementById('detection').textContent = 'Error';
}
};<div id="detection"></div>答案 12 :(得分：0)
检查以下内容：How to detect Safari, Chrome, IE, Firefox and Opera browser?
在您的情况下： var isChrome = !! window.chrome &&（!! window.chrome.webstore || !! window.chrome.runtime）;
答案 13 :(得分：0)
在Mac上的Chrome上为我工作。似乎比以上所有或更简单或更可靠（如果测试了userAgent字符串）。
<custom-list items="listItems" />
答案 14 :(得分：0)
了解不同桌面浏览器（Firefox，IE，Opera，Edge，Chrome）的名称。除了Safari。
{
...
ajaxData: {"name" : "john", "country" : "US"},
dataType: 'json',
dataLocation: '/v2/forum/',
...
}
在以下浏览器版本中工作：
function getBrowserName() {
var browserName = '';
var userAgent = navigator.userAgent;
(typeof InstallTrigger !== 'undefined') && (browserName = 'Firefox');
( /* @cc_on!@*/ false || !!document.documentMode) && (browserName = 'IE');
(!!window.chrome && userAgent.match(/OPR/)) && (browserName = 'Opera');
(!!window.chrome && userAgent.match(/Edge/)) && (browserName = 'Edge');
(!!window.chrome && !userAgent.match(/(OPR|Edge)/)) && (browserName = 'Chrome');
/**
* Expected returns
* Firefox, Opera, Edge, Chrome
*/
return browserName;
}
原始代码段不再适用于Chrome，我忘记了在哪里找到它。它以前有野生动物园，但我再也无法使用野生动物园了，所以我无法验证了。
只有Firefox和IE代码是原始代码段的一部分。
直接检查Opera，Edge和Chrome。它们在userAgent中具有差异。 Opera - 58.0.3135.79
Firefox - 65.0.2 (64-bit)
IE - 11.413.15063 (JS Fiddle no longer supports IE just paste in Console)
Edge - 44.17763.1.0
Chrome - 72.0.3626.121 (Official Build) (64-bit)
仅存在于Opera中。 OPR仅存在于Edge中。因此，要检查Chrome是否应使用这些字符串。
对于Firefox和IE，我无法解释它们的作用。
我将将此功能添加到package i'm writing
答案 15 :(得分：0)
要检查浏览器是否为Google Chrome浏览器：
var isChrome = navigator.userAgent.includes("Chrome") && navigator.vendor.includes("Google Inc");
console.log(navigator.vendor);
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36 "
console.log(navigator.userAgent);
// "Google Inc."
答案 16 :(得分：0)
var is_chrome = browseris.chrome
或检查ather浏览器：
browseris.firefox
browseris.ie
browseris.safari
而且，您可以检查browseris.chrome7up等版本。
检查“ browseris”对象中的所有现有信息
答案 17 :(得分：0)
我找到的最好的解决方案是：
var isChrome = (navigator.userAgent.indexOf("Chrome") != -1 && navigator.vendor.indexOf("Google Inc") != -1)
使用 .indexOf 而不是 .includes 使其更兼容浏览器。
尽管（或因为）重点是使您的代码特定于浏览器，但您需要在大多数（或所有）浏览器中工作的条件。
答案 18 :(得分：-4)
所有答案都错了。 “Opera”和“Chrome”在所有情况下都是相同的。
（编辑部分）
这是正确答案
if (window.chrome && window.chrome.webstore) {
// this is Chrome
}