javascript - 如何检测Safari，Chrome，IE，Firefox和Opera浏览器？(How to detect Safari, Chrome, IE, Firefox and Opera browser?)

Question

I have 5 addons/extensions for FF, Chrome, IE, Opera, and Safari.

(我有5个FF，Chrome，IE，Opera和Safari插件/扩展程序。)

How can I recognize the user browser and redirect (once an install button has been clicked) to download the corresponding addon?

(如何识别用户浏览器并重定向（一旦单击安装按钮）下载相应的插件？)

  ask by FrankC translate from so

Answer 1

Googling for browser reliable detection often results in checking the User agent string.

(谷歌浏览器可靠检测通常会导致检查用户代理字符串。)

This method is not reliable, because it's trivial to spoof this value.

(这种方法不可靠，因为欺骗这个值很简单。)

I've written a method to detect browsers by duck-typing .

(我已经编写了一种通过鸭嘴式检测浏览器的方法。)

Only use the browser detection method if it's truly necessary, such as showing browser-specific instructions to install an extension.

(仅在确实需要时才使用浏览器检测方法，例如显示特定于浏览器的安装扩展说明。)

Use feature detection when possible.

(尽可能使用特征检测。)

Demo: https://jsfiddle.net/6spj1059/

(演示： 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' && safari.pushNotification)); // Internet Explorer 6-11 var isIE = /*@cc_on!@*/false || !!document.documentMode; // Edge 20+ var isEdge = !isIE && !!window.StyleMedia; // Chrome 1 - 71 var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime); // 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 += 'isBlink: ' + isBlink + '<br>'; document.body.innerHTML = output; 

Analysis of reliability(可靠性分析)

The previous method depended on properties of the rendering engine ( -moz-box-sizing and -webkit-transform ) to detect the browser.

(先前的方法取决于呈现引擎的属性（ -moz-box-sizing和-webkit-transform ）来检测浏览器。)

These prefixes will eventually be dropped, so to make detection even more robust, I switched to browser-specific characteristics:

(这些前缀最终将被删除，因此为了使检测更加可靠，我切换到特定于浏览器的特征：)

• Internet Explorer: JScript's Conditional compilation (up until IE9) and document.documentMode .

  (Internet Explorer：JScript的条件编译 （直到IE9）和document.documentMode 。)

• Edge: In Trident and Edge browsers, Microsoft's implementation exposes the StyleMedia constructor.

  (Edge：在Trident和Edge浏览器中，Microsoft的实现公开了StyleMedia构造函数。)

  Excluding Trident leaves us with Edge.

  (排除三叉戟使我们陷入困境。)

• Firefox: Firefox's API to install add-ons: InstallTrigger

  (Firefox：Firefox的用于安装加载项的API： InstallTrigger)

• Chrome: The global chrome object, containing several properties including a documented chrome.webstore object.

  (Chrome：全局chrome对象，包含多个属性，包括已记录的chrome.webstore对象。)

  • Update 3 chrome.webstore is deprecated and undefined in recent versions

    (Update 3 chrome.webstore已被弃用，并且在最新版本中未定义)

• Safari: A unique naming pattern in its naming of constructors.

  (Safari：构造函数命名中的独特命名模式。)

  This is the least durable method of all listed properties and guess what?

  (这是所有列出的属性中最不耐用的方法，您猜怎么着？)

  In Safari 9.1.3 it was fixed.

  (在Safari 9.1.3中已修复。)

  So we are checking against SafariRemoteNotification , which was introduced after version 7.1, to cover all Safaris from 3.0 and upwards.

  (因此，我们正在检查7.1版之后引入的SafariRemoteNotification ，以涵盖3.0版及更高版本的所有SafariRemoteNotification 。)

• Opera: window.opera has existed for years, but will be dropped when Opera replaces its engine with Blink + V8 (used by Chromium).

  (Opera： window.opera已经存在多年了，但是当Opera用Blink + V8（由Chromium使用）替换其引擎时， 它将被删除 。)

  • Update 1: Opera 15 has been released , its UA string looks like Chrome, but with the addition of "OPR".

    (更新1： Opera 15已发布 ，其UA字符串类似于Chrome，但增加了“ OPR”。)

    In this version the chrome object is defined (but chrome.webstore isn't).

    (在此版本中，定义了chrome对象（但chrome.webstore ）。)

    Since Opera tries hard to clone Chrome, I use user agent sniffing for this purpose.

    (由于Opera会努力克隆Chrome，因此我使用了用户代理嗅探功能。)

  • Update 2: !!window.opr && opr.addons can be used to detect Opera 20+ (evergreen).

    (更新2： !!window.opr && opr.addons可用于检测Opera 20+ （常绿）。)

• Blink: CSS.supports() was introduced in Blink once Google switched on Chrome 28. It's of course, the same Blink used in Opera.

  (Blink：Google启用Chrome 28后，Blink中引入了 CSS.supports() 。当然，这与Opera中使用的Blink相同。)

Successfully tested in:(在以下位置成功测试：)

• Firefox 0.8 - 61

  (Firefox 0.8-61)

• Chrome 1.0 - 71

  (铬1.0-71)

• Opera 8.0 - 34

  (Opera 8.0-34)

• Safari 3.0 - 10

  (Safari 3.0-10)

• IE 6 - 11

  (IE 6-11)

• Edge - 20-42

  (边缘-20-42)

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

(2016年11月更新，包括从9.1.3起的Safari浏览器检测)

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

(2018年8月更新，以更新关于chrome，firefox IE和edge的最新成功测试。)

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

(于2019年1月更新，修复了chrome检测（由于window.chrome.webstore不推荐使用），并包括了最新成功的chrome测试。)