我需要一些函数返回一个布尔值来检查浏览器是否是Chrome。
我如何创建这样的功能?
我需要一些函数返回一个布尔值来检查浏览器是否是Chrome。
我如何创建这样的功能?
当前回答
更简短:var is_chrome = /chrome/i。测试(导航器。userAgent);
其他回答
更新:请参阅Jonathan的回答,了解处理这个问题的最新方法。下面的答案可能仍然有效,但在其他浏览器中可能会引发一些误报。
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
然而,正如前面提到的,用户代理可能会被欺骗,所以在处理这些问题时,最好使用特征检测(例如Modernizer),正如其他答案所提到的。
在进行浏览器检测时,可以使用一些可选的窗口属性。其中一个是可选的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属性,所以应该只测试是否存在用户代理字符串。
如果你想检测Chrome的渲染引擎(所以不是谷歌Chrome或Chromium中的特定功能),一个简单的选项是:
var isChrome = !!window.chrome;
注意:对于基于Chrome的许多版本的Edge, Opera等也会返回true(感谢@Carrm指出这一点)。避免这种情况是一场持续的战斗(见窗口)。所以你应该问问自己,你是在试图检测渲染引擎(在2020年几乎所有主要的现代浏览器都使用)还是其他一些Chrome(或Chromium?)特定的功能。
你可以跳过!!
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嗅探是不好的做法,尽可能使用特征检测。
从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。