小编典典

如何检测 Safari、Chrome、IE、Firefox 和 Opera 浏览器?

all

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

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


阅读 176

收藏
2022-02-28

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

可靠性分析

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

  • Internet Explorer:JScript 的条件编译(直到 IE9)和document.documentMode.
  • Edge:在 Trident 和 Edge 浏览器中,微软的实现暴露了StyleMedia构造函数。排除三叉戟给我们留下了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 边缘 /80.0.361.9 “)。
  • Firefox:Firefox 用于安装附加组件的 API:InstallTrigger
  • Chrome:全局chrome对象,包含多个属性,包括文档chrome.webstore化对象。
  • 更新 3chrome.webstore在最近的版本中已被弃用且未定义
  • Safari:构造函数命名的独特命名模式。这是所有列出的属性中最不耐用的方法,你猜怎么着?在 Safari 9.1.3 中已修复。因此,我们正在检查SafariRemoteNotification7.1 之后引入的 Safari,以涵盖 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+(常绿)。
  • Blink: Google 启动 Chrome 28 后CSS.supports() 在 Blink 中引入。当然,与 Opera 中使用的 Blink 相同。

成功测试:

  • 火狐 0.8 - 61
  • 铬 1.0 - 71
  • 歌剧 8.0 - 34
  • 野生动物园 3.0 - 10
  • 即 6 - 11
  • 边缘 - 20-42
  • 边缘开发 - 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 评论)。

2022-02-28