如何检测Safari，Chrome，IE，Firefox和Opera浏览器？-Java 学习之路

594

我有FF，Chrome，IE，Opera和Safari的5个插件/扩展 .

我需要代码来识别用户浏览器并重定向（在安装按钮上单击）以下载相应的插件 .

17 回答

1334
用于浏览器可靠检测的Google搜索通常会导致检查用户代理字符串 . 这种方法是可靠的，因为欺骗这个值是微不足道的 .
我已经编写了一种方法来检测duck-typing的浏览器 .

如果确实有必要，请仅使用浏览器检测方法，例如显示特定于浏览器的指令以安装扩展程序 . Use feature detection when possible.

演示：https://jsfiddle.net/311aLtkz/
```
// 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 = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 68
var isChrome = !!window.chrome && !!window.chrome.webstore;

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;
```
可靠性分析

previous method依赖于渲染引擎（-moz-box-sizing和 -webkit-transform ）的属性来检测浏览器 . 这些前缀最终将被删除，因此为了使检测更加健壮，我切换到特定于浏览器的特性：
- Internet Explorer：JScript的Conditional compilation（直到IE9）和document.documentMode .
- Edge：在Trident和Edge浏览器中，Microsoft的实现公开了 StyleMedia 构造函数 . 不包括Trident让我们离开Edge .
- Firefox：用于安装附加组件的Firefox API：InstallTrigger
- Chrome：全局 chrome 对象，包含多个属性，包括记录的chrome.webstore对象 .
- Update 3 chrome.webstore 在最新版本中已弃用且未定义
- Safari：构造函数命名中的唯一命名模式 . 这是所有列出的属性中最不耐用的方法，猜猜是什么？在Safari 9.1.3中，它已得到修复 . 因此，我们正在检查7.1版之后引入的 SafariRemoteNotification ，以涵盖3.0及以上版本的所有Safaris .
- Opera： window.opera 已存在多年，但will be dropped当Opera用Blink V8（Chromium使用）取代其引擎时 .
- 更新1：Opera 15 has been released，其UA字符串看起来像Chrome，但添加了"OPR" . 在此版本中定义了 chrome 对象（但 chrome.webstore 不是） . 由于Opera努力克隆Chrome，我使用用户代理嗅探来实现此目的 .
- 更新2： !!window.opr && opr.addons 可用于检测Opera 20+（常青树） .
- 闪烁： CSS.supports() was introduced in Blink一旦谷歌开启了Chrome 28.当然，与Opera中使用的Blink相同 .
在以下方面成功通过测试：
- Firefox 0.8 - 61
- Chrome 1.0 - 68
- 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的最新成功测试 .
回复于 2024-04-20T11:58:12+08:00

You can try following way to check Browser version.

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

And if you need to know only IE Browser version then you can follow below code. This code works well for version IE6 to 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>

回复于 2024-04-20T11:58:12+08:00

92
我知道使用lib可能有点过分，但只是为了丰富线程，你可以检查is.js这样做：
```
is.firefox();
is.ie(6);
is.not.safari();
```
回复于 2024-04-20T11:58:12+08:00

如果有人发现这个有用，我已经将Rob W's answer变成了一个返回浏览器字符串而不是浮动多个变量的函数 . 由于浏览器也可以使其缓存结果，以防止它在下次调用函数时需要将其解析出来 .

/**
 * 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 = /*@cc_on!@*/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());

回复于 2024-04-20T11:58:12+08:00

这是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 = /*@cc_on!@*/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的一个shell .

回复于 2024-04-20T11:58:12+08:00

以下是几个处理浏览器检测的着名库 .

Bowser by lancedikson - 2,713★s - 最后更新时间：2018年3月12日 - 2.9KB

console.log(bowser);
document.write("You are using " + bowser.name +
               " v" + bowser.version + 
               " on " + bowser.osname);

<script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/1.9.3/bowser.min.js"></script>

Platform.js by bestiejs - 1912★s - 最后更新时间：2018年1月23日 - 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>

由darcyclarke

Detect.js - 501★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>

jQuery浏览器by gabceb - 485★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>

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,230★s - 最后更新时间为2018年2月5日
Modernizr - 22,320★s - 最后更新3月4日，2018年 - 为了击败死马，特征检测应该驱动任何canIuse样式的问题 . 浏览器检测真的只是为了细节 .

进一步阅读

回复于 2024-04-20T11:58:12+08:00

谢谢大家 . 我在最近的浏览器上测试了代码片段：Chrome 55，Firefox 50，IE 11和Edge 38，我想出了以下组合，这些组合对我来说都适用 . 我确信它可以改进，但它是一个快速的解决方案，无论谁需要：

var browser_name = '';
isIE = /*@cc_on!@*/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);

它为HTML添加了一个CSS类，其中包含浏览器的名称 .

回复于 2024-04-20T11:58:12+08:00

您可以使用 try 和 catch 来使用不同的浏览器错误消息 . IE和边缘混在一起，但是我使用了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;
        }
    }
};

回复于 2024-04-20T11:58:12+08:00

简短的变种

var browser = (function(agent){
        switch(true){
            case agent.indexOf("edge") > -1: return "edge";
            case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
            case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
            case agent.indexOf("trident") > -1: return "ie";
            case agent.indexOf("firefox") > -1: return "firefox";
            case agent.indexOf("safari") > -1: return "safari";
            default: return "other";
        }
    })(window.navigator.userAgent.toLowerCase());

回复于 2024-04-20T11:58:12+08:00

-1

还有一个较少的"hacky"方法适用于所有流行的浏览器 . 谷歌在他们的Closure Library中加入了浏览器检查 . 特别是，看看goog.userAgent和goog.userAgent.product . 通过这种方式，如果浏览器呈现方式发生变化，您也可以更新（假设您始终运行最新版本的闭包编译器 . ）

回复于 2024-04-20T11:58:12+08:00
0
如果您需要知道某些特定浏览器的数字版本，可以使用以下代码段 . 目前它会告诉你Chrome / Chromium / Firefox的版本：
```
var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;
```
回复于 2024-04-20T11:58:12+08:00

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',
   });
});

回复于 2024-04-20T11:58:12+08:00

0
UAParser是轻量级JavaScript库之一，用于从userAgent字符串中识别浏览器，引擎，操作系统，CPU和设备类型/模型 .

有一个CDN可用 . 在这里，我已经包含了一个使用UAParser检测浏览器的示例代码 .
```
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/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 的值来有条件地对页面进行编程 .

源教程：How to detect browser, engine, OS, CPU, and device using JavaScript?
回复于 2024-04-20T11:58:12+08:00

This结合了2016年的Rob 's original answer and Pilau'更新

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 = /*@cc_on!@*/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;

回复于 2024-04-20T11:58:12+08:00

在这里，您可以找到它正在运行的浏览器 .

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")}


        }

回复于 2024-04-20T11:58:12+08:00

不知道它对任何人是否有用，但这里有一个让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 (/*@cc_on!@*/false || !!document["documentMode"]) {
    return 'ie';
}

// Edge 20+
if (!(/*@cc_on!@*/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';
}

}

回复于 2024-04-20T11:58:12+08:00

6
简单的单行JavaScript代码将为您提供浏览器的名称：
```
function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}
```
回复于 2024-04-20T11:58:12+08:00

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

17 回答

可靠性分析

在以下方面成功通过测试：

Bowser by lancedikson - 2,713★s - 最后更新时间：2018年3月12日 - 2.9KB

Platform.js by bestiejs - 1912★s - 最后更新时间：2018年1月23日 - 5.9KB

Detect.js - 501★s - 最后更新时间2015年10月26日 - 2.9KB

jQuery浏览器by gabceb - 485★s - 最后更新时间2015年11月23日 - 1.3KB

QuirksMode的浏览器检测（存档） - 上次更新时间：2013年11月14日 - 884B

值得注意的提及：

进一步阅读

相关问题