我有 5 个 FF、Chrome、IE、Opera 和 Safari 的插件/扩展。
如何识别用户浏览器并重定向(单击安装按钮后)以下载相应的插件?
谷歌搜索浏览器可靠检测通常会导致检查用户代理字符串。这种方法 不 可靠,因为欺骗这个值是微不足道的。 我写了一个方法来检测浏览器的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) 来检测浏览器。这些前缀最终将被删除,因此为了使检测更加健壮,我切换到浏览器特定的特征:
-moz-box- sizing
-webkit-transform
document.documentMode
StyleMedia
InstallTrigger
chrome
chrome.webstore
SafariRemoteNotification
window.opera
!!window.opr && opr.addons
CSS.supports()
2016 年 11 月更新,包括检测 9.1.3 及更高版本的 Safari 浏览器 于 2018 年 8 月更新,更新了 chrome、firefox IE 和 edge 的最新成功测试。 于 2019 年 1 月更新以修复 chrome 检测(由于 window.chrome.webstore 弃用)并包括最新的成功测试 chrome。 于 2019 年 12 月更新以添加基于 Chromium 检测的 Edge(基于 @Nimesh 评论)。
2016 年 11 月更新,包括检测 9.1.3 及更高版本的 Safari 浏览器
于 2018 年 8 月更新,更新了 chrome、firefox IE 和 edge 的最新成功测试。
于 2019 年 1 月更新以修复 chrome 检测(由于 window.chrome.webstore 弃用)并包括最新的成功测试 chrome。
于 2019 年 12 月更新以添加基于 Chromium 检测的 Edge(基于 @Nimesh 评论)。