如何检测Safari，Chrome，IE，Firefox和Opera浏览器？ [英] How to detect Safari, Chrome, IE, Firefox and Opera browser?

问题描述

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

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

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

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

推荐答案

搜索浏览器可靠检测通常会导致检查用户代理字符串。这种方法不可靠，因为欺骗这个值是微不足道的。

我写了一个通过 duck-typing 。

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.

演示： https://jsfiddle.net/311aLtkz/

// 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;

可靠性分析

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

Analysis of reliability

The previous method depended on properties of the rendering engine (-moz-box-sizing and -webkit-transform) to detect the browser. These prefixes will eventually be dropped, so to make detection even more robust, I switched to browser-specific characteristics:

• Internet Explorer：JScript的< a href =https://msdn.microsoft.com/en-us/library/8ka90k2e(v=vs.94).aspx\"rel =noreferrer>条件编译（直到IE9）和< a href =https://msdn.microsoft.com/en-us/library/ie/cc196988%28v=vs.85%29.aspx\"rel =noreferrer> document.documentMode 。


• Edge：在Trident和Edge浏览器中，Microsoft的实现公开了 StyleMedia 构造函数。不包括Trident让我们离开Edge。


• Firefox：用于安装附加组件的Firefox的API： InstallTrigger


• Chrome：全局 chrome object，包含多个属性，包括记录的 chrome.webstore 对象。
  
  
  
  
  • 更新3 chrome.webstore 在最新版本中已弃用且未定义
  
  
  • Internet Explorer: JScript's Conditional compilation (up until IE9) and document.documentMode.
  • Edge: In Trident and Edge browsers, Microsoft's implementation exposes the StyleMedia constructor. Excluding Trident leaves us with Edge.
  • Firefox: Firefox's API to install add-ons: InstallTrigger
  • Chrome: The global chrome object, containing several properties including a documented chrome.webstore object.
    • Update 3 chrome.webstore is deprecated and undefined in recent versions
    
    
    • 更新1： Opera 15已经发布，其UA字符串看起来像Chrome，但增加了OPR。在此版本中，定义了 chrome 对象（但 chrome.webstore 不是）。由于Opera努力克隆Chrome，我会使用用户代理嗅探。
    
    
    • 更新2： !! window.opr&& opr.addons 可用于检测 Opera 20+ （常青树。
    
    
    • Update 1: Opera 15 has been released, its UA string looks like Chrome, but with the addition of "OPR". In this version the chrome object is defined (but chrome.webstore isn't). Since Opera tries hard to clone Chrome, I use user agent sniffing for this purpose.
    • Update 2: !!window.opr && opr.addons can be used to detect Opera 20+ (evergreen).
    
    
    • Firefox 0.8 - 61
    
    
    • Chrome 1.0 - 71
    
    
    • Opera 8.0 - 34
    
    
    • Safari 3.0 - 10
    
    
    • IE 6 - 11
    
    
    • Edge - 20-42
    
    
    • Firefox 0.8 - 61
    • Chrome 1.0 - 71
    • Opera 8.0 - 34
    • Safari 3.0 - 10
    • IE 6 - 11
    • Edge - 20-42

    2016年11月更新，包括检测9.1.3及更高版本的Safari浏览器

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

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

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

    在2019年1月更新以修复chrome检测（因为window.chrome.webstore折旧并包括最新的成功测试铬。

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

    这篇关于如何检测Safari，Chrome，IE，Firefox和Opera浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！