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

问题描述

我有 5 个适用于 FF、Chrome、IE、Opera 和 Safari 的插件/扩展.

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/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) 到检测浏览器.这些前缀最终会被删除，因此为了使检测更加稳健，我切换到浏览器特定的特征:

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 的条件编译(直到 IE9)和 document.documentMode.
• Edge:在 Trident 和 Edge 浏览器中，微软的实现公开了 StyleMedia 构造函数.排除 Trident 后，我​​们只剩下 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 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 已经存在多年，但 将被删除.
• 更新 1:Opera 15 已发布，它的 UA 字符串看起来像 Chrome，但添加了OPR".在此版本中，定义了 chrome 对象(但没有定义 chrome.webstore).由于 Opera 努力尝试克隆 Chrome，我为此使用了用户代理嗅探.
• 更新 2:!!window.opr &&opr.addons 可用于检测 Opera 20+(常绿).
• Blink:CSS.supports() 在 Blink 中引入 一旦 Google 开启 Chrome 28.当然，它与 Opera 中使用的 Blink 相同.

• 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.
• Edge (based on chromium): The user agent include the value "Edg/[version]" at the end (ex: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.16 Safari/537.36 Edg/80.0.361.9").
• 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
• Safari: A unique naming pattern in its naming of constructors. This is the least durable method of all listed properties and guess what? In Safari 9.1.3 it was fixed. So we are checking against SafariRemoteNotification, which was introduced after version 7.1, to cover all Safaris from 3.0 and upwards.
• Opera: window.opera has existed for years, but will be dropped when Opera replaces its engine with Blink + V8 (used by Chromium).
• 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).
• Blink: CSS.supports() was introduced in Blink once Google switched on Chrome 28. It's of course, the same Blink used in Opera.

• Firefox 0.8 - 61
• Chrome 1.0 - 71
• Opera 8.0 - 34
• Safari 3.0 - 10
• IE 6 - 11
• 边缘 - 20-42
• 边缘开发 - 80.0.361.9

于 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 已弃用)并包含最新的 chrome 成功测试.

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

于 2019 年 12 月更新，添加了基于 Chromium 检测的 Edge(基于@Nimesh 评论).

Updated in December 2019 to add Edge based on Chromium detection (based on the @Nimesh comment).

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