关于javascript：如何检测Safari，Chrome，IE，Firefox和Opera浏览器？


How to detect Safari, Chrome, IE, Firefox and Opera browser?

我有5个附加组件/扩展，用于FF、Chrome、IE、Opera和Safari。

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

相关讨论

搜索浏览器可靠的检测通常会导致检查用户代理字符串。这个方法不可靠，因为欺骗这个值很简单。我已经编写了一种方法，通过duck输入检测浏览器。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 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:';
output += 'isFirefox: ' + isFirefox + '';
output += 'isChrome: ' + isChrome + '';
output += 'isSafari: ' + isSafari + '';
output += 'isOpera: ' + isOpera + '';
output += 'isIE: ' + isIE + '';
output += 'isEdge: ' + isEdge + '';
output += 'isBlink: ' + isBlink + '';
document.body.innerHTML = output;

可靠性分析

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

  • Internet Explorer:JScript的条件编译(直到IE9)和document.documentMode。
  • Edge：在Trident和Edge浏览器中，微软的实现公开了StyleMedia构造函数。排除三叉戟让我们有了优势。
  • firefox:firefox安装附加组件的API:InstallTrigger
  • chrome：全局chrome对象，包含多个属性，包括文档化的chrome.webstore对象。
    • 更新3 chrome.webstore在最新版本中已被否决和未定义。
  • Safari：一种独特的命名模式，用于命名构造函数。这是所有列出的属性中最不耐用的方法，你猜怎么着？在Safari 9.1.3中，它被修复。因此，我们正在检查版本7.1之后引入的SafariRemoteNotification，以涵盖3.0及以上版本的所有Safaris。
  • Opera:window.opera已经存在多年了，但是当Opera用Blink+V8(铬合金使用)取代其发动机时，它将被放弃。
    • 更新1:Opera15已经发布，它的UA字符串看起来像Chrome，但是添加了"opr"。在这个版本中，定义了chrome对象(但没有定义chrome.webstore)。因为Opera很难克隆Chrome，所以我使用了用户代理嗅探。
    • 更新2:!!window.opr && opr.addons可用于检测opera 20+(常绿)。
  • blink:Google打开Chrome28后，在blink中引入了CSS.supports()。当然，这和歌剧中使用的眨眼是一样的。

成功测试于：

  • 火狐0.8-61
  • 铬1 - 71
  • 歌剧8 - 34
  • 狩猎3 - 10
  • IE 6—11
  • 边缘-20 42

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 depreciation) and include the latest successful tests on chrome.

相关讨论