我需要一些函数返回一个布尔值来检查浏览器是否是Chrome。
我如何创建这样的功能?
我需要一些函数返回一个布尔值来检查浏览器是否是Chrome。
我如何创建这样的功能?
更新:请参阅Jonathan的回答,了解处理这个问题的最新方法。下面的答案可能仍然有效,但在其他浏览器中可能会引发一些误报。
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
然而,正如前面提到的,用户代理可能会被欺骗,所以在处理这些问题时,最好使用特征检测(例如Modernizer),正如其他答案所提到的。
Var is_chrome = /chrome/。~ . test(navigator.userAgent.toLowerCase()) 这是一个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库
CDN - https://cdnjs.com/lies/uaparser.js - npm - https://www.npmjs.com/package/ua-parser-js
附注:请注意UA嗅探是不好的做法,尽可能使用特征检测。
如果你有勇气,你可以尝试浏览器嗅探,得到一个版本:
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 equals true来检入IE中的window.chrome。IE以前返回undefined,现在返回true。但是你猜怎么着,IE11现在又返回undefined了。IE11还为window.navigator.vendor返回一个空字符串""。
更新:
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!
更新7/24/2015 -增加Opera检查
Opera 30刚刚发布。它不再输出window.opera。还有窗户。chrome在新的Opera 30中输出为true。因此您必须检查OPR是否在userAgent中。我更新了上面的条件,以解释Opera 30中的这个新变化,因为它使用与谷歌Chrome相同的渲染引擎。
更新10/13/2015 -添加IE检查
添加检查IE边缘,因为它输出真窗口。chrome . .即使IE11的window.chrome输出未定义。感谢artfulhacker让我们知道这一点!
更新2/5/2016 -添加iOS Chrome检查
添加检查iOS Chrome检查CriOS,因为它在iOS上的Chrome输出为真。感谢xinthose让我们知道这件事!
更新4/18/2018 -更改Opera检查
编辑检查Opera,检查窗口。opr没有定义,因为现在Chrome 66有opr在window.navigator.vendor。感谢Frosty Z和Daniel Wallman的报道!
如果你想检测Chrome的渲染引擎(所以不是谷歌Chrome或Chromium中的特定功能),一个简单的选项是:
var isChrome = !!window.chrome;
注意:对于基于Chrome的许多版本的Edge, Opera等也会返回true(感谢@Carrm指出这一点)。避免这种情况是一场持续的战斗(见窗口)。所以你应该问问自己,你是在试图检测渲染引擎(在2020年几乎所有主要的现代浏览器都使用)还是其他一些Chrome(或Chromium?)特定的功能。
你可以跳过!!
所有答案都是错的。“Opera”和“Chrome”在所有情况下都是相同的。
(编辑)
下面是正确答案
if (window.chrome && window.chrome.webstore) {
// this is Chrome
}
用户可以更改用户代理。尝试在body元素的样式对象中测试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, ' '));
检查这个:如何检测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在window对象上没有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。