JavaScript:如何找出如果用户浏览器是Chrome?

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

我如何创建这样的功能?

283559 次浏览
小开
最佳答案

更新:请参阅乔纳森的回答的更新方法来处理这个问题。下面的答案可能仍然有效，但在其他浏览器中可能会引发一些误报。

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

然而，如前所述，用户代理可能会被欺骗，所以在处理这些问题时，最好使用特征检测(例如现代化的)，正如其他答案所提到的。

小开

var is_chrome = /chrome/。~ . test(navigator.userAgent.toLowerCase()) < / s >
这是一个12年前写的老答案;从现在起(即:， 2022年8月)

更新(2022年8月):

现在，使用用户代理(用户代理嗅探)的浏览器检测是通常是个坏主意。特征检测应该是去的方式。

参考:使用用户代理进行浏览器检测

然而，如果你仍然希望这样做，使用第三方库，如

var parser = new UAParser();
var result = parser.getResult();


console.log(result.browser);// {name: "Chrome", version: "104.0.0.0", "major": "104"}
console.log(result.device); // {model: undefined, type: undefined, vendor: undefined}
console.log(result.os);     // {name: "Windows", version: "10"}
console.log(result.engine); // {name: "Blink", version: "104.0.0.0"}
console.log(result.cpu);    // {"architecture": "amd64"}
<script
src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/1.0.2/ua-parser.min.js">
</script>

上面的代码段使用ua-parser-js库

  1. CDN - __abc0
  2. npm - https://www.npmjs.com/package/ua-parser-js

附注:请注意UA嗅探是不好的做法，尽可能使用特征检测。

小开

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

小开

如果你有勇气，你可以尝试浏览器嗅探，得到一个版本:

var ua = navigator.userAgent;
if(/chrome/i.test(ua)) {
var uaArray = ua.split(' ')
,   version = uaArray[uaArray.length - 2].substr(7);
}

这个检测到的版本可能是Chrome版本，或者Edge版本，或者其他版本。浏览器插件可以很容易地改变userAgent、平台和其他东西，所以不建议这样做。

向绿脚趾向我道歉，我用了他的答案。

小开

要检查浏览器是否为谷歌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
}

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

这个工作的原因是因为如果你使用谷歌Chrome检查器，并进入控制台选项卡。输入'window'并按enter键。然后你就可以查看“窗口对象”的DOM属性了。当你折叠对象时，你可以看到所有的属性，包括'chrome'属性。

你不能再使用strict = true在IE中检查window.chrome。IE过去返回undefined，现在返回true。但是你猜怎么着，IE11现在又返回undefined了。 IE11也为window.navigator.vendor返回一个空字符串""。

我希望这能有所帮助!

更新:

感谢Halcyon991在下面指出，新的Opera 18+对于window.chrome也输出为true。看起来window.navigator.vendor0是基于window.navigator.vendor1的。所以我添加了一个检查，以确保window.navigator.vendor是:"Google Inc"而不是"Opera Software ASA"。还要感谢window.navigator.vendor2和window.navigator.vendor3提醒Chrome 33不再返回true…window.chrome现在检查是否不为空。但是请密切关注IE11，我添加了undefined的检查，因为IE11现在输出undefined，就像它第一次发布时一样。然后经过一些更新构建后，它输出到true ..现在最近的更新构建再次输出undefined。微软拿不定主意!

更新 7/24/2015 -添加Opera检查

Opera 30刚刚发布。它不再输出window.opera。并且在新的Opera 30中window.chrome输出为true。所以你必须检查超载比是否在userAgent中。我更新了上面的条件，以解释Opera 30中的这个新变化，因为它使用与谷歌Chrome相同的渲染引擎。

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

为IE Edge添加检查，因为它为window.chrome输出true ..即使IE11为window.chrome输出undefined。感谢artfulhacker让我们知道这一点!

更新 2/5/2016 -添加iOS Chrome检查

添加检查iOS Chrome检查CriOS，因为它输出的Chrome在iOS上的true。感谢xinthose让我们知道这一点!

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

编辑检查Opera，检查window.opr不是undefined，因为现在Chrome 66在window.navigator.vendor中有OPR。感谢冷淡的Z和丹尼尔Wallman报告这个!

小开

如果你想检测Chrome的渲染引擎(所以不是谷歌Chrome或Chromium中的特定功能)，一个简单的选项是:

var isChrome = !!window.chrome;

注意:对于许多基于Chrome的Edge、Opera等版本，这也会返回true(感谢@Carrm指出这一点)。避免这是一场持续的战斗(参见下面的window.opr)，所以你应该问问自己，你是在试图检测渲染引擎(在2020年几乎所有主要的现代浏览器都使用)还是其他一些Chrome(或Chromium?)特定的功能。

和你可以跳过!!

小开

所有答案都是错的。“Opera”和“Chrome”在所有情况下都是相同的。

(编辑)

下面是正确答案

if (window.chrome && window.chrome.webstore) {
// this is Chrome
}
小开

用户可以更改用户代理。尝试在body元素的style对象中测试webkit前缀属性

if ("webkitAppearance" in document.body.style) {
// do stuff
}
小开 

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

小开

你可以使用:

navigator.userAgent.indexOf("Chrome") != -1

它正在处理v.71

小开

检查这个:如何检测Safari, Chrome, IE, Firefox和Opera浏览器?

在你的情况下:

var isChrome = (window.chrome.webstore || window.chrome.runtime) && !!window.chrome;
小开

在Mac上的Chrome上为我工作。似乎比上面所有的都更简单或更可靠(如果userAgent字符串测试)。

        var isChrome = false;
if (window.chrome && !window.opr){
isChrome = true;
}
console.log(isChrome);
小开

了解不同桌面浏览器的名称(Firefox, IE, Opera, Edge, Chrome)。除了狩猎。

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;
}

适用于以下浏览器版本:

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)

查看主旨在这里和小提琴在这里

原来的代码片段不再适用于Chrome浏览器，我忘记了我在哪里找到它。它之前有safari浏览器，但我不再有safari浏览器，所以我不能再验证了。

只有Firefox和IE代码是原始代码片段的一部分。

Opera、Edge和Chrome的检查非常简单。它们在userAgent中存在差异。OPR只存在于Opera中。Edge只存在于Edge中。所以要检查Chrome，这些字符串不应该在那里。

至于Firefox和IE，我无法解释它们的功能。

我将把这个功能添加到我正在写的包

小开

查询浏览器是否为谷歌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."
小开 
var is_chrome = browseris.chrome

或者查看浏览器:

browseris.firefox
browseris.ie
browseris.safari

此外，你可以检查版本，如browseris.chrome7up等。

检查browseris对象中的所有现有信息

小开

在进行浏览器检测时，可以使用一些可选的窗口属性。其中一个是可选的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';
}

你可以在这小提琴中找到这个简化的代码:

诀窍是先测试其他浏览器，然后再测试Chrome (Edge, Opera)。在交换机中的所有这些情况下，浏览器的不同可能标识符被组合在一个正则表达式中，并针对用户代理字符串进行测试。对于Chrome和Opera，我们还会对window属性进行额外的测试，对于Chrome，我们还会检查供应商名称是否与预期值匹配。

注意: 我针对许多不同的用户代理进行了测试，但在此不能断言此解决方案是完美无缺的。任何关于改进或失败的浏览器检测的建议都是欢迎的，这样我就可以进一步改进这段代码。

更新:

修复了Chrome在iOS上(用户代理CriOS)检测的错误。iOS上的Chrome在窗口对象上没有chrome: true属性，因此应该只测试是否存在用户代理字符串。

小开

我发现的最好的解决方案，并在大多数浏览器中给出真或假的答案是:

var isChrome = (navigator.userAgent.indexOf("Chrome") != -1 && navigator.vendor.indexOf("Google Inc") != -1)

使用.indexOf代替.includes使其更兼容浏览器。 即使(或因为)整个重点是使您的代码特定于浏览器，您需要条件在大多数(或所有)浏览器中工作

小开

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

小开

现在你可以使用navigator.userAgent.includes("Chrome")


提交答案