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

822

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

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

javascript  browser-detection 
— 弗兰克
source
2
尝试detectjs，它可用于所有浏览器
— dude
1
— Matthijs Wessels
2
detect.js不再维护（根据github.com/darcyclarke/Detect.js），他们推荐github.com/lancedikson/bowser
— YakovL，
我使用了UAParser插件，它是用Vanilla JavaScript编写的。资料来源：如何使用JavaScript检测浏览器，引擎，操作系统，CPU和设备？
— 卢赞·巴拉
— KyleMit

Answers:

1686

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

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

演示：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 = /*@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构造函数。排除三叉戟使我们陷入困境。
  • 边缘（基于铬）：用户代理的末尾包括值“ Edg / [version]”（例如：“ Mozilla / 5.0（Windows NT 10.0； Win64； x64））AppleWebKit / 537.36（KHTML，如Gecko）Chrome / 80.0.3987.16 Safari / 537.36 Edg / 80.0.361.9 “）。
  • Firefox：Firefox的用于安装加载项的API： InstallTrigger
  • Chrome：全局chrome对象，包含多个属性，包括已记录的chrome.webstore对象。
  • Update 3 chrome.webstore已弃用，并且在最新版本中未定义
  • Safari：构造函数命名中的独特命名模式。这是所有列出的属性中最不耐用的方法，您猜怎么着？在Safari 9.1.3中已修复。因此，我们正在针对SafariRemoteNotification7.1版之后引入的进行检查，以涵盖从3.0版开始的所有Safari。
  • Opera：window.opera已经存在多年了，但是当Opera用Blink + V8（Chromium使用）替换其引擎时，Opera 将被删除。
  • 更新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相同。

在以下位置成功测试：

  • Firefox 0.8-61
  • 铬1.0-71
  • Opera 8.0-34
  • Safari 3.0-10
  • IE 6-11
  • 边缘-20-42
  • Edge开发-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
source
5
仅供参考，这不适用于Chrome扩展程序，因为window.chrome.webstore在那里未定义。尚未通过Firefox扩展程序进行检查。 is.js在Chrome和Firefox扩展程序中都可以使用其他地方提到的功能。
— nevf
60
isSafari不适用于Safari10。我将争论这是一个不好的解决方案（不是我有一个好的解决方案）。无法保证您要检查的许多内容不会被其他浏览器删除或添加。每个使用此代码检查Safari的站点都因macOS Sierra或Safari 10升级而中断：(
— gman
10
但是，是否已经在这些浏览器的移动版本以及台式机版本上对此进行了测试？确实，每个平台有不同的移动版本和不同的桌面版本。实际上，firefox具有3个用于Windows，Linux，Mac OS的二进制文件，以及2个用于Android和iOS的二进制文件。
— DrZ214 '16
3
目前isSafari并没有下工作<iframe>下的Safari 9.1.2
— 米克Ohtamaa
23
从Chrome版本开始不推荐使用window.chrome.webstore。71：blog.chromium.org/2018/06/…–
— st_bk
133

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

    <!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>
— 尼梅什
source
3
为什么要写这么多行代码？userAgent不明确。
— igaurav 2015年
5
那么Microsoft Edge呢？
— user6031759
3
上面的答案在检查野生动物园之前先检查铬。因为Safari chrome在useragent中没有关键字。野生动物园用户代理的示例mozilla/5.0 (macintosh; intel mac os x 10_11_5) applewebkit/601.6.17 (khtml, like gecko) version/9.1.1 safari/601.6.17
— Golak Sarangi
11
Stackoverflow使用此方法
— vityavv
3
在Opera（最新版本）中进行测试时，这会为我返回“ Chrome”。为了解决这个问题，我将Opera if语句更改为：if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
— Kyle Vassella
60

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

is.firefox();
is.ie(6);
is.not.safari();
— 拉斐尔·埃英（Rafael Eyng）
source
9
值得一提的是，它主要是在做User-Agent检测。补充了供应商检测/某些地方的功能检测。
— TygerKrash 2015年
1
@TygerKrash当然，你是绝对正确的。这实际上就是我对我的回答的意思：打开的源代码，is.js并检查其工作方式。
— Rafael Eyng '16
4
jQuery曾经包含类似的属性：$ .browser.msie ...已从1.9版api.jquery.com/jquery.browser中
— 里加，
@RafaelEyng：我认为执行User-Agent检测的问题在于此方法不可靠。
— HoldOffHunger
当您假设尚未修改UA字符串时，这绝对是最可靠的方法。它还可以正确检测操作系统（android，win，mac，linux）；设备类型（台式机，平板电脑，移动设备）。它还可以测试浏览器的版本。
— kashiraja
51

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

lancedikson开发的Bowser- 4,065★s-最新更新于2019年10月2日-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/bowser@2.7.0/es5.js"></script>
展开摘要

*支持基于Chromium的Edge

bestiejs编写的Platform.js -2,550★s-最近更新于2019年4月14日-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风格的问题。浏览器检测实际上仅用于为各个浏览器提供自定义图像，下载文件或说明。

进一步阅读

— 凯尔·米特
source
1
不浪费轮子就值得几Kb的开销。
— 字形
46

万一有人发现它有用，我将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 = /*@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());
展开摘要

— 意志
source
2
在Edge浏览器中，它将返回Chrome
— Riz，2016年
2
@eFriend我更新了最新浏览器测试的答案。
— pilau
4
我喜欢这个，但是我宁愿使用userAgent（）的后备，而不是“不知道”。
— HoldOffHunger
2
物业window.chrome.webstore在Chrome 71中除去，因此这种方法不再工作。
— Bedla
您可以使用仅返回cachedResult并省略if语句的函数覆盖该函数。第一次，您仍然必须返回结果。浏览器= function（）{return cachedResult}; 返回cachedResult;
— Timar Ivo Batis
22

简短的变体

var browser = (function() {
    var test = function(regexp) {
        return regexp.test(window.navigator.userAgent);
    }
    switch (true) {
        case test(/edg/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)
展开摘要

— 亚历克斯·尼克林
source
如果您不喜欢我，请解释原因。
— 亚历克斯·尼克林
2
这会在ios上使用“ chrome”浏览时显示“ safari”
— Reza
11

这是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的外壳。

— 皮劳
source
!!window.MSAssertion;通过远程桌面在Edge beta中，该测试对我不起作用。返回false。
— 也不
@NoR您正在使用哪个版本的Edge？重要
— pilau '16
1
@NoR哦，您正在使用虚拟机... MSAssertion技巧已调整为版本25。但是由于许多开发人员都依赖于虚拟机，因此我将尝试将其调整为较旧的版本。好决定。谢谢。
— pilau '16
1
@NoR已更新-应该是面向未来的。在StyleMedia（大写）的对象是特定于IE和边缘似乎并没有被去任何地方。
— pilau
1
我还发现UAParser是一个js插件，至今仍保持不变，并且非常准确且易于使用。
— Issac Gable
9

您可以使用try和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;
        }
    }
};
— 梅森·琼斯（Mason Jones）
source
这是一个好主意：您不需要“窗口”或“导航器”对象！
— 瓦迪姆（Vadim）
我的建议是彻底清除文件和窗口。参见IE块：返回“ firefox”；} else if（err.search（“ [对象错误]”）！== -1 && e.message！= null && e.description！= null）{返回“ IE”; } else if（err.search（“无法将e转换为对象”）！== -1）{返回“ opera”;
— Vadim
如何区分IE和Edge？
— 梅森·琼斯
奇怪，我再也无法再现err.search（“ [object Error]”）。无论如何，对我来说，Firefox，Chrome和其他东西就足够了。我在没有窗口和文档对象的PAC文件中使用它。
— Vadim
只是找出原因。看起来好像是为了充填PAC文件，Windows 7不使用安装在我的计算机上的IE11，而是使用类似IE7的引擎（可能来自Windows主机）。因此，err.toString（）给出了“ [object Error]”，而在IE11内部给出了“无法获取属性...”字符串，如代码中所示。因此，上面的代码将在IE7上失败。
— 瓦迪姆（Vadim）
8

谢谢大家。我在最新的浏览器上测试了以下代码段：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);

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

— dnns
source
您是否在ios上测试了chrome？
— 维克
8

不知道它是否对任何人有用，但是这里有一个使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';
}

}

— 托尼·史密斯
source
为什么会有一些以“ false”为条件的if？
— Yonatan Nir，
@YonatanNir我认为它的意思是检测条件编译：developer.mozilla.org/en-US/docs/Web/JavaScript/...
— 卢卡斯·阿泽维多
5

在台式机和移动设备上检测浏览器：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

— 伊尔沙德·汗（Irshad Khan）
source
4

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

— 阿尔伯特
source
如果大多数答案是唯一可靠的方法，则大多数答案与“ hacky”无关。如多次提到的那样，userAgent很容易被欺骗，因此是不可靠的。
— HoldOffHunger
4

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

var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;
— 瓦莱拉（Valera Tumash）
source
2

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页面进行有条件的编程。

源教程：如何使用JavaScript检测浏览器，引擎，操作系统，CPU和设备？

— 卢赞·巴拉（Luzan Baral）
source
3
一个千行代码调用轻量级？
— deathangel908
1 
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',
   });
});
— Neel Upadhyay
source
0

这种结合了罗布的原来的答案和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 = /*@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;
— 乔·博格
source
是否有必要告诉用户他们正在使用哪种浏览器？我想他们已经知道这一点。
— HoldOffHunger
1
@HoldOffHunger的主要目的是使最兼容的代码适应活动的浏览器，而不是告知用户他们正在使用哪个浏览器。除非他们使用的浏览器是过时的，并且已经被排除在向后兼容之外，否则，如果用户切换到最新的浏览器，让用户知道他们可以从更好的体验中受益，这将是无害的
— Joe Borg
0

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

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


        }
— 阿杰·库玛（Ajay Kumar）
source
0

我们可以使用下面的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);
    };
— NPE
source
0 
const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)
— 兰达达
source
不幸的是，这不是一个好答案。Edge在他的userAgent消息中包含Chrome。最好使用!! window.chrome &&（!! window.chrome.webstore || !! window.chrome.runtime）;
— Przemo
-3

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

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}
— 尼拉夫·梅塔
source
16
仅userAgent不能告诉我们足够的信息。例如，我的用户代理是“ Mozilla / 5.0（Macintosh；英特尔Mac OS X 10_10_4）AppleWebKit / 537.36（KHTML，例如Gecko）Chrome / 45.0.2454.85 Safari / 537.36”，其中提到了Mozilla，Chrome和Safari。我是哪种浏览器？
— eremzeit 2015年
抱歉，但是“我是哪种浏览器？”却没有让您了解。你想得到什么？
— 尼拉夫·梅塔
1
@NiravMehta他的意思是navigator.userAgent告诉您所有可能的浏览器。因此，这确实不可靠，唯一可行的情况是用户只有一个浏览器。
— Baldráni
1
这不是检测浏览器的可靠方法。有些用户代理同时包含chrome和safari，因此无法检测到我们应该考虑并持续使用哪一个，但同样重要的是，可以通过网页修改用户代理。
— 尤文尼克'17
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.