如何检测Safari，Chrome，IE，Firefox和Opera浏览器？

#1 楼

谷歌浏览器可靠检测通常会导致检查用户代理字符串。这种方法不可靠，因为欺骗这个值很简单。
我已经编写了一种通过鸭子输入来检测浏览器的方法。
只有在确实需要时才使用浏览器检测方法，例如显示浏览器特定的说明来安装扩展。尽可能使用特征检测。
演示：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; 

可靠性分析
以前的方法取决于渲染引擎（-moz-box-sizing和-webkit-transform）的属性来检测浏览器。这些前缀最终将被删除，因此为了使检测更加可靠，我切换到浏览器特定的特性：

Internet Explorer：JScript的条件编译（直到IE9）和document.documentMode。
Edge ：在Trident和Edge浏览器中，Microsoft的实现公开了StyleMedia构造函数。排除Trident会使我们留有Edge。
Edge（基于铬）：用户代理的末尾包括值“ Edg / [version]”（例如：“ Mozilla / 5.0（Windows NT 10.0； Win64； x64）” AppleWebKit / 537.36（KHTML，例如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已经存在多年了，但是当Opera用Blink + V8（由Chromium使用）替换其引擎时，将被删除。
更新1：Opera 15已发布，其UA字符串看起来像Chrome，但是带有增加了“ OPR”。在此版本中，定义了chrome对象（但没有定义chrome.webstore）。由于Opera会努力克隆Chrome，因此我使用了用户代理嗅探功能。
更新2：!!window.opr && opr.addons可用于检测Opera 20+（常绿）。
眨眼：CSS.supports()是Google引入的Blink之一。开启了Chrome28。它当然是Opera中使用的Blink。

在以下设备中成功测试：

Firefox 0.8-61
Chrome 1.0-71
Opera 8.0-34
Safari 3.0-10
IE 6-11
Edge-20-42
Edge Dev-80.0.361.9


2016年11月更新，包括从9.1.3起的Safari浏览器检测功能
2018年8月更新，以更新对chrome，firefox IE和edge的最新成功测试。
2019年1月更新为修复了chrome检测（由于window.chrome.webstore弃用）并包括了最新成功的chrome测试。
于2019年12月更新，添加了基于Chromium检测的Edge（基于@Nimesh注释）。