欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-16 11:24:39
...

我有5个FF,Chrome,IE,Opera和Safari插件/扩展程序。

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


#1楼

简单的一行JavaScript代码将为您提供浏览器的名称:

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}

#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("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>

#3楼

我知道为此使用lib可能会过头,但是只是为了丰富线程,您可以检查is.js的执行方式:

is.firefox();
is.ie(6);
is.not.safari();

#4楼

万一有人发现它有用,我将Rob W的答案做成一个返回浏览器字符串的函数,而不是让多个变量浮动。 由于浏览器也无法真正改变而不重新加载,因此我使它缓存了结果,以防止下次调用该函数时需要对其进行处理。

 /** * Gets the browser name or returns an empty string if unknown. * This function also caches the result to provide for any * future calls this function has. * * @returns {string} */ var browser = function() { // Return cached result if avalible, else get result then cache it. if (browser.prototype._cachedResult) return browser.prototype._cachedResult; // 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'] || safari.pushNotification); // Internet Explorer 6-11 var isIE = /*@aaa@qq.com*/false || !!document.documentMode; // Edge 20+ var isEdge = !isIE && !!window.StyleMedia; // Chrome 1+ var isChrome = !!window.chrome && !!window.chrome.webstore; // Blink engine detection var isBlink = (isChrome || isOpera) && !!window.CSS; return browser.prototype._cachedResult = isOpera ? 'Opera' : isFirefox ? 'Firefox' : isSafari ? 'Safari' : isChrome ? 'Chrome' : isIE ? 'IE' : isEdge ? 'Edge' : isBlink ? 'Blink' : "Don't know"; }; console.log(browser()); 


#5楼

这是Rob答案的2016年调整版本,包括Microsoft Edge和Blink的检测:

编辑 :我用此信息更新了Rob的回答。)

 // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera) isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification); // Internet Explorer 6-11 isIE = /*@aaa@qq.com*/false || !!document.documentMode; // Edge 20+ isEdge = !isIE && !!window.StyleMedia; // Chrome 1+ isChrome = !!window.chrome && !!window.chrome.webstore; // Blink engine detection isBlink = (isChrome || isOpera) && !!window.CSS; /* Results: */ console.log("isOpera", isOpera); console.log("isFirefox", isFirefox); console.log("isSafari", isSafari); console.log("isIE", isIE); console.log("isEdge", isEdge); console.log("isChrome", isChrome); console.log("isBlink", isBlink); 

这种方法的优点在于它依赖于浏览器引擎属性,因此它甚至涵盖了派生的浏览器,例如Yandex或Vivaldi,它们实际上与使用其引擎的主要浏览器兼容。 Opera是一个例外,它依赖于用户代理嗅探,但是今天(即15版及更高版本)甚至Opera本身仅是Blink的外壳。


#6楼

这种结合了罗布的原来的答案和Pilau的2016年更新

    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@aaa@qq.com*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
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 += 'isIE Edge: ' + isEdge + '<br>';
document.body.innerHTML = output;

#7楼

如果您需要了解某些特定浏览器的数字版本,可以使用以下代码段。 目前,它将告诉您Chrome / Chromium / Firefox的版本:

var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;

#8楼

您可以使用try and catch来使用不同的浏览器错误消息。 IE和edge混杂在一起,但是我使用了Rob W的鸭子打字(基于此处的项目: https//www.khanacademy.org/computer-programming/i-have-opera/2395080328 )。

var getBrowser = function() {        
    try {
        var e;
        var f = e.width;
    } catch(e) {
        var err = e.toString();

        if(err.indexOf("not an object") !== -1) {
            return "safari";
        } else if(err.indexOf("Cannot read") !== -1) {
            return "chrome";
        } else if(err.indexOf("e is undefined") !== -1) {
            return "firefox";
        } else if(err.indexOf("Unable to get property 'width' of undefined or null reference") !== -1) {
            if(!(false || !!document.documentMode) && !!window.StyleMedia) {
                return "edge";
            } else {
                return "IE";
            }
        } else if(err.indexOf("cannot convert e into object") !== -1) {
            return "opera";
        } else {
            return undefined;
        }
    }
};

#9楼

谢谢大家。 我在最近的浏览器上测试了以下代码段:Chrome 55,Firefox 50,IE 11和Edge 38,并提出了以下组合,它们对我所有的浏览器均有效。 我敢肯定它可以改进,但是对于任何需要的人来说,这都是一个快速的解决方案:

var browser_name = '';
isIE = /*@aaa@qq.com*/false || !!document.documentMode;
isEdge = !isIE && !!window.StyleMedia;
if(navigator.userAgent.indexOf("Chrome") != -1 && !isEdge)
{
    browser_name = 'chrome';
}
else if(navigator.userAgent.indexOf("Safari") != -1 && !isEdge)
{
    browser_name = 'safari';
}
else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
{
    browser_name = 'firefox';
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
    browser_name = 'ie';
}
else if(isEdge)
{
    browser_name = 'edge';
}
else 
{
   browser_name = 'other-browser';
}
$('html').addClass(browser_name);

它将带有浏览器名称的CSS类添加到HTML。


#10楼

还有一种不太“ hacky”的方法适用于所有流行的浏览器。 Google在其Closure Library中包含了一个浏览器检查。 特别要看一下goog.userAgentgoog.userAgent.product 。 这样,如果浏览器呈现的方式发生某些变化,您也可以保持最新(假设您始终运行最新版本的闭包编译器。)


#11楼

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
   'width' : '100%',
   'margin-left' : '0px',
   });
});

#12楼

在这里,您可以找到正在运行的浏览器。

function isValidBrowser(navigator){

            var isChrome =  navigator.indexOf('chrome'),
            isFireFox= navigator.indexOf('firefox'),
            isIE = navigator.indexOf('trident') ,
            isValidChromeVer = parseInt(navigator.substring(isChrome+7, isChrome+8)) >= 4,
            isValidFireForVer = parseInt(navigator.substring(isFireFox+8, isFireFox+9)) >= 3,
            isValidIEVer = parseInt(navigator.substring(isIE+8, isIE+9)) >= 7;

            if((isChrome > -1 && isValidChromeVer){ console.log("Chrome Browser")}

            if(isFireFox > -1 && isValidFireForVer){ console.log("FireFox  Browser")}

            if(isIE > -1 && isValidIEVer)){ console.log("IE Browser")}


        }

#13楼

简短的变体

 var browser = (function(){ var test = function(regexp) { return regexp.test(window.navigator.userAgent);} switch(true){ case test(/edge/i): return "edge"; case test(/opr/i) && (!!window.opr || !!window.opera): return "opera"; case test(/chrome/i) && !!window.chrome: return "chrome"; case test(/trident/i) : return "ie"; case test(/firefox/i) : return "firefox"; case test(/safari/i): return "safari"; default: return "other"; } })(); console.log(browser) 


#14楼

截至2019年5月,这是几个处理浏览器检测的著名库。

lancedikson开发的Bowser -3,761★s-最新更新时间2019年5月26日-4.8KB

 var result = bowser.getParser(window.navigator.userAgent); console.log(result); document.write("You are using " + result.parsedResult.browser.name + " v" + result.parsedResult.browser.version + " on " + result.parsedResult.os.name); 
 <script src="https://unpkg.com/aaa@qq.com/es5.js"></script> 


bestiejs的Platform.js -2,250★s-最近更新-2018年10月30日-5.9KB

 console.log(platform); document.write("You are using " + platform.name + " v" + platform.version + " on " + platform.os); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js"></script> 

gabceb的jQuery浏览器 -504★s-最近更新,2015年11月23日-1.3KB

 console.log($.browser) document.write("You are using " + $.browser.name + " v" + $.browser.versionNumber + " on " + $.browser.platform); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script> 

darcyclarke编写的Detect.js(已存档) -522★s-最新更新时间为2015年10月26日-2.9KB

 var result = detect.parse(navigator.userAgent); console.log(result); document.write("You are using " + result.browser.family + " v" + result.browser.version + " on " + result.os.family); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script> 

由QuirksMode 浏览器检测(存档) -最近更新时间2013年11月14日-884B

 console.log(BrowserDetect) document.write("You are using " + BrowserDetect.browser + " v" + BrowserDetect.version + " on " + BrowserDetect.OS); 
 <script src="https://kylemit.github.io/libraries/libraries/BrowserDetect.js"></script> 


值得注意的是:

  • whichBrowser -1,355★s-最后更新于2018年10月2日
  • Modernizr -23,397★s-最后更新于2019年1月12日-要喂饱一匹马,特征检测应该会引发任何canIuse风格的问题。 浏览器检测实际上仅用于为各个浏览器提供自定义图像,下载文件或说明。

进一步阅读


#15楼

UAParser是轻量级JavaScript库之一,可从userAgent字符串识别浏览器,引擎,操作系统,CPU和设备类型/模型。

有可用的CDN。 在这里,我提供了一个示例代码来使用UAParser检测浏览器。

<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/ua-parser.min.js"></script>
<script type="text/javascript">
    var parser = new UAParser();
    var result = parser.getResult();
    console.log(result.browser);     // {name: "Chromium", version: "15.0.874.106"}
</script>
</head>
<body>
</body>
</html>

现在,您可以使用result.browser的值对页面进行有条件的编程。

源教程: 如何使用JavaScript检测浏览器,引擎,操作系统,CPU和设备?


#16楼

不知道它是否对任何人有用,但是这里有一个使TypeScript满意的变体。

export function getBrowser() {

// Opera 8.0+
if ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0) {
    return 'opera';
}

// Firefox 1.0+
if (typeof window["InstallTrigger"] !== 'undefined') {
    return 'firefox';
}

// Safari 3.0+ "[object HTMLElementConstructor]" 
if (/constructor/i.test(window["HTMLElement"]) || (function(p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof window["safari"] !== 'undefined' && window["safari"].pushNotification))) {
    return 'safari';
}

// Internet Explorer 6-11
if (/*@aaa@qq.com*/false || !!document["documentMode"]) {
    return 'ie';
}

// Edge 20+
if (!(/*@aaa@qq.com*/false || !!document["documentMode"]) && !!window["StyleMedia"]) {
    return 'edge';
}

// Chrome 1+
if (!!window["chrome"] && !!window["chrome"].webstore) {
    return 'chrome';
}

// Blink engine detection
if (((!!window["chrome"] && !!window["chrome"].webstore) || ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0)) && !!window["CSS"]) {
    return 'blink';
}

}


#17楼

在台式机和移动设备上检测浏览器:Edge,Opera,Chrome,Safari,Firefox,IE

我在@nimesh代码中做了一些更改,现在它也适用于Edge,并且修复了Opera问题:

function getBrowserName() {

    if ( navigator.userAgent.indexOf("Edge") > -1 && navigator.appVersion.indexOf('Edge') > -1 ) {
        return 'Edge';
    }
    else if( navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
    {
        return 'Opera';
    }
    else if( navigator.userAgent.indexOf("Chrome") != -1 )
    {
        return 'Chrome';
    }
    else if( navigator.userAgent.indexOf("Safari") != -1)
    {
        return 'Safari';
    }
    else if( navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
        return 'Firefox';
    }
    else if( ( navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ) ) //IF IE > 10
    {
        return 'IE';
    }  
    else 
    {
        return 'unknown';
    }
}

感谢@nimesh用户:2063564


#18楼

我们可以使用下面的util方法

utils.isIE = function () {
        var ver = navigator.userAgent;
        return ver.indexOf("MSIE") !== -1 || ver.indexOf("Trident") !== -1; // need to check for Trident for IE11
    };

    utils.isIE32 = function () {
        return (utils.isIE() && navigator.appVersion.indexOf('Win64') === -1);
    };

    utils.isChrome = function () {
        return (window.chrome);
    };

    utils.isFF64 = function () {
        var agent = navigator.userAgent;
        return (agent.indexOf('Win64') >= 0 && agent.indexOf('Firefox') >= 0);
    };

    utils.isFirefox = function () {
        return (navigator.userAgent.toLowerCase().indexOf('firefox') > -1);
    };

#19楼

const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)

#20楼

谁能解释为什么Chrome被检测为闪烁以及如何将其分开? 目前,我正在使用Chrome

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


#21楼

谷歌浏览器可靠检测通常会导致检查用户代理字符串。 这种方法可靠,因为欺骗这个值很简单。
我已经编写了一种通过鸭嘴式检测浏览器的方法。

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

演示: 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' && safari.pushNotification)); // Internet Explorer 6-11 var isIE = /*@aaa@qq.com*/false || !!document.documentMode; // Edge 20+ var isEdge = !isIE && !!window.StyleMedia; // Chrome 1 - 71 var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime); // 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 += 'isBlink: ' + isBlink + '<br>'; document.body.innerHTML = output; 

可靠性分析

先前的方法取决于呈现引擎的属性( -moz-box-sizing-webkit-transform )来检测浏览器。 这些前缀最终将被删除,因此为了使检测更加可靠,我切换到特定于浏览器的特征:

  • Internet Explorer:JScript的条件编译 (直到IE9)和document.documentMode
  • Edge:在Trident和Edge浏览器中,Microsoft的实现公开了StyleMedia构造函数。 排除三叉戟使我们陷入困境。
  • Firefox:Firefox的用于安装加载项的API: InstallTrigger
  • Chrome:全局chrome对象,包含多个属性,包括已记录的chrome.webstore对象。
    • Update 3 chrome.webstore已被弃用,并且在最新版本中未定义
  • Safari:构造函数命名中的独特命名模式。 这是所有列出的属性中最不耐用的方法,您猜怎么着? 在Safari 9.1.3中已修复。 因此,我们正在检查7.1版之后引入的SafariRemoteNotification ,以涵盖3.0版及更高版本的所有SafariRemoteNotification
  • 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后,Blink中引入了 CSS.supports() 。当然,这与Opera中使用的Blink相同。

在以下位置成功测试:

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

2016年11月更新,包括从9.1.3起的Safari浏览器检测

2018年8月更新,以更新关于chrome,firefox IE和edge的最新成功测试。

于2019年1月更新,修复了chrome检测(由于window.chrome.webstore不推荐使用),并包括了最新成功的chrome测试。