新手上路，请多包涵

我有 5 个用于 Firefox、Chrome、Internet Explorer(IE)、Opera 和 Safari 的插件/扩展。

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

原文由 FrankC 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript browser-detection

阅读 1.3k

2 个回答

得票最新

社区维基

发布于
2022-08-25

✓ 已被采纳

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

我写了一个方法来检测浏览器的 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 浏览器中，Microsoft 的实现公开了 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 对象。
更新 3 chrome.webstore 在最新版本中已弃用且未定义
Safari：构造函数命名的独特命名模式。这是所有列出的属性中最不耐用的方法，你猜怎么着？在 Safari 9.1.3 中已修复。因此，我们正在检查 SafariRemoteNotification ，它是在 7.1 版之后引入的，以涵盖 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 评论）。

原文由 Rob W 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-08-25

您可以尝试通过以下方式检查浏览器版本。

     <!DOCTYPE html>
    <html>
    <body>
    <p>What is the name(s) of your browser?</p>
    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>
    <script>

    function myFunction() {
     if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 )
    {
        alert('Opera');
    }
    else if(navigator.userAgent.indexOf("Edg") != -1 )
    {
        alert('Edge');
    }
    else if(navigator.userAgent.indexOf("Chrome") != -1 )
    {
        alert('Chrome');
    }
    else if(navigator.userAgent.indexOf("Safari") != -1)
    {
        alert('Safari');
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 )
    {
         alert('Firefox');
    }
    else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
    {
      alert('IE');
    }
    else
    {
       alert('unknown');
    }
    }
    </script>

    </body>
    </html>

如果你只需要知道 IE 浏览器版本，那么你可以按照下面的代码。此代码适用于 IE6 到 IE11 版本

<!DOCTYPE html>
<html>
<body>

<p>Click on Try button to check IE Browser version.</p>

<button onclick="getInternetExplorerVersion()">Try it</button>

<p id="demo"></p>

<script>
function getInternetExplorerVersion() {
   var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        var rv = -1;

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer, return version number
        {

            if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) {
                //For IE 11 >
                if (navigator.appName == 'Netscape') {
                    var ua = navigator.userAgent;
                    var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
                    if (re.exec(ua) != null) {
                        rv = parseFloat(RegExp.$1);
                        alert(rv);
                    }
                }
                else {
                    alert('otherbrowser');
                }
            }
            else {
                //For < IE11
                alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
            }
            return false;
        }}
</script>

</body>
</html>

原文由 Nimesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

可靠性分析

成功测试：

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

什么是闭包？闭包有哪些应用场景？

element-plus的el-menu怎么修改el-sub-menu的template的B的颜色？

Stack Overflow 翻译