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

2022-08-29 22:09:26

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

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


答案 1

谷歌搜索浏览器可靠检测通常会导致检查用户代理字符串。此方法不可靠,因为欺骗此值是微不足道的。
我写了一个通过鸭子打字来检测浏览器的方法。

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

演示: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-size 和 )来检测浏览器。这些前缀最终会被删除,因此为了使检测更加可靠,我切换到了特定于浏览器的特征:-webkit-transform

  • Internet Explorer:JScript的条件编译(直到IE9)和document.documentMode
  • Edge:在Trident和Edge浏览器中,Microsoft的实现公开了构造函数。排除三叉戟让我们有了Edge。StyleMedia
  • 边缘(基于铬):用户代理在末尾包含值“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.webstore 对象。chrome
  • 更新 3 已弃用,在最新版本中未定义chrome.webstore
  • Safari:构造函数命名中的独特命名模式。这是所有列出的属性中最不持久的方法,你猜怎么着?在Safari 9.1.3中,它被修复了。因此,我们正在检查 ,这是在版本 7.1 之后引入的,以涵盖 3.0 及以后的所有 Safari。SafariRemoteNotification
  • Opera:已经存在多年,但当Opera用Blink + V8(由Chromium使用)取代其引擎时,它将被删除window.opera
  • 更新1:Opera 15已经发布,其UA字符串看起来像Chrome,但增加了“OPR”。在此版本中,对象已定义(但不是)。由于Opera努力克隆Chrome,因此我使用用户代理嗅探来实现此目的。chromechrome.webstore
  • 更新2:可用于检测Opera 20+(常青)。!!window.opr && opr.addons
  • Blink:在Google打开Chrome 28后在Blink中引入。当然,这与Opera中使用的Blink相同。CSS.supports()

已成功测试:

  • 火狐 0.8 - 61
  • 铬 1.0 - 71
  • 歌剧 8.0 - 34
  • 野生动物园 3.0 - 10
  • IE 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 弃用),并包括最新的成功版式测试。

于 2019 年 12 月更新,以添加基于铬检测的边缘(基于@Nimesh注释)。


答案 2

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

    <!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>