javascript - 如何检测 Safari、Chrome、IE、Firefox 和 Opera 浏览器？

Question

我有 5 个适用于 Firefox、Chrome、Internet Explorer(IE)、Opera 和 Safari 的插件/扩展。

如何正确识别用户浏览器并重定向(单击安装按钮后)以下载相应的插件？

Answer 1

搜索浏览器可靠检测通常会导致检查用户代理字符串。此方法不可靠，因为欺骗此值很容易。
我写了一个检测浏览器的方法duck-typing .

仅在确实需要时才使用浏览器检测方法，例如显示特定于浏览器的说明来安装扩展程序。 尽可能使用特征检测。

演示:https://jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;


var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

可靠性分析

previous method依赖于渲染引擎的属性(-moz-box-sizing 和 -webkit-transform)来检测浏览器。这些前缀最终将被删除，因此为了使检测更加可靠，我切换到浏览器特定的特征:

• Internet Explorer:JScript 的 Conditional compilation (直到 IE9)和 document.documentMode .
• Edge:在 Trident 和 Edge 浏览器中，Microsoft 的实现公开了 StyleMedia 构造函数。排除 Trident 后，我​​们只剩下 Edge。
• Edge(基于 chromium):用户代理在末尾包含值“Edg/[version]”(例如:“Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) ) Chrome/80.0.3987.16 Safari/537.36 Edg/80.0.361.9")。
• Firefox:Firefox 安装插件的 API:InstallTrigger
• Chrome:全局 chrome 对象，包含多个属性，包括文档中的 chrome.webstore对象。
• 更新 3 chrome.webstore 在最近的版本中已弃用且未定义
• Safari:构造函数命名的独特命名模式。这是所有列出的属性中最不耐用的方法，你猜怎么着？在 Safari 9.1.3 中已修复。因此，我们正在检查 7.1 之后引入的 SafariRemoteNotification，以涵盖 3.0 及更高版本的所有 Safari。
• Opera:window.opera 已存在多年，但 will be dropped当 Opera 将其引擎替换为 Blink + V8(由 Chromium 使用)时。
• 更新 1:Opera 15 has been released ，它的 UA 字符串看起来像 Chrome，但添加了“OPR”。在此版本中，定义了 chrome 对象(但未定义 chrome.webstore)。由于 Opera 试图克隆 Chrome，我为此使用了用户代理嗅探。
• 更新 2:!!window.opr && opr.addons 可用于检测 Opera 20+ (常青树)。
• 闪烁:CSS.supports() was introduced in Blink一旦 Google 开启 Chrome 28。当然，它与 Opera 中使用的 Blink 相同。

成功测试:

• 火狐 0.8 - 61
• Chrome 1.0 - 71
• Opera 8.0 - 34
• Safari 3.0 - 10
• IE 6 - 11
• 边缘 - 20-42
• 边缘开发 - 80.0.361.9

Updated in November 2016 to include detection of Safari browsers from 9.1.3 and upwards

Updated in August 2018 to update the latest successful tests on chrome, firefox IE and edge.

Updated in January 2019 to fix chrome detection (because of the window.chrome.webstore deprecation) and include the latest successful tests on chrome.

Updated in December 2019 to add Edge based on Chromium detection (based on the @Nimesh comment).