logo标签列表

如何检测浏览器的版本？

javascriptbrowserversionbrowser-detection
345

我一直在寻找能够让我检测访问网站的用户是否使用 Firefox 3 或 4 的代码。但我找到的只是用于检测浏览器类型而不是版本的代码。

如何检测这样一个浏览器的版本？

6
我建议使用经过验证的库来进行设置，而不是使用零散的代码：
  • https://github.com/bestiejs/platform.js/
  • https://github.com/ded/bowser， 两者都拥有超过1000颗星。
 - Simon Fakir
你可以使用UAParser JavaScript库来检测浏览器及其版本。我是根据这篇文章如何使用JavaScript检测浏览器、引擎、操作系统、CPU和设备？实现的。 - Luzan Baral
页面未找到。 - john-jones
34个回答
572
您可以查看浏览器的输出，并将该信息用于记录或测试多个浏览器。 

navigator.sayswho= (function(){
    var ua= navigator.userAgent;
    var tem; 
    var M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

console.log(navigator.sayswho); // outputs: `Chrome 62`

2
刚刚发现一个严重问题，将浏览器IE11降级到IE10后，导航器用户代理显示为Mozilla/4.0（兼容；MSIE 7.0；Windows NT 6.1；WOW64；Trident/6.0；SLCC2；.NET CLR 2.0.50727；.NET CLR 3.5.30729；.NET CLR 3.0.30729；Media Center PC 6.0；InfoPath.3；.NET4.0C；.NET4.0E）。从字符串来看，它是带有trident/6.0的IE7。请小心处理。 - Yogesh
66
如果这个回答包含输出示例会很有帮助，我无法确定函数会返回哪些字符串。请提供输出示例。 - fivedogit
3
还没有考虑 Edge 浏览器： tem = ua.match(/\b(OPR|Edge)\/(\d+)/i); if (tem != null) return {name : tem[1] === 'OPR' ? 'Opera' : tem[1], version : tem[2]}; - Vincent Ketelaars
10
这个脚本错误地将内部Facebook浏览器（在Android上点击Facebook应用程序中的Web链接时启动）报告为Chrome 4.0版本。用户代理字符串看起来像这样： Mozilla/5.0（Linux; Android 5.0; Nexus 9 Build/LRX21R; wv）AppleWebKit/537.36（KHTML, like Gecko）Version/4.0 Chrome/45.0.2454.95 Safari/537.36 [FB_IAB/FB4A;FBAV/50.0.0.10.54;]非常突出的用户代理，所以不能忽略它... - Willster
2
有一些库可以实现这个功能，比如说bowser，通常情况下，如果没有必要，你不应该重新造轮子。 - demented hedgehog
显示剩余8条评论
237

这是对Kennebec答案的改进。

mbrowser=function(){
    this.spec_string=   navigator.userAgent;
    this.name=          this.get_name();
    this.version=       this.get_version();
    };

mbrowser.prototype.get_name=function(){
    var spec_string=this.spec_string;

    var matches=spec_string.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    
    // Work with the matches.
    matches=matches[2]? [matches[1], matches[2]]: [navigator.appName, navigator.appVersion, '-?'];
        
    // Trident.
    if(/trident/i.test(matches[1])){
        var temp=/\brv[ :]+(\d+)/g.exec(spec_string) || [];
        return 'IE';
        }
    
    // Chrome.
    if(matches[1]==='Chrome'){
        var temp=spec_string.match(/\bOPR|Edge\/(\d+)/)
        if(temp!=null)   {return 'Opera';}
        }   

    if((temp=spec_string.match(/version\/(\d+)/i))!=null){
        matches.splice(1,1,temp[1]);
        }
                                                                                                                       
    var name=matches[0];

    return name;
    };


mbrowser.prototype.get_version=function(){
    var spec_string=this.spec_string;

    var matches=spec_string.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 

    // Work with the matches.
    matches=matches[2]? [matches[1], matches[2]]: [navigator.appName, navigator.appVersion, '-?'];

    // Trident.
    if(/trident/i.test(matches[1])){
        var temp=/\brv[ :]+(\d+)/g.exec(spec_string) || []; 
        var version=(temp[1]||'');
        return version;
        }   

    // Chrome.
    if(matches[1]==='Chrome'){
        var temp=spec_string.match(/\bOPR|Edge\/(\d+)/)
        var version=temp[1];
        if(temp!=null)   {return version;}
        }   

    if((temp=spec_string.match(/version\/(\d+)/i))!=null){
        matches.splice(1,1,temp[1]);                                                                                   
        }

    var version=matches[1];

    return version;
    };

// m=module.
var browser=new mbrowser();
console.log(browser.name);    // Chrome
console.log(browser.version); // 109

这段代码从spec_string（navigator.userAgent）中推断出浏览器的名称和版本号。但是各种不同的spec_string都有其相应的浏览器名称和版本号。而且我没法检查其中的一小部分。如果您能发布一个您知道结果的浏览器名称和版本号的spec_string，那将非常好。然后我可以相应地更新代码。

接下来我会逐步建立一个spec_string项目列表。

'spec_string1'=>[name,number],
'spec_string2'=>[name,number],

将来，每当对代码进行更改时，它都可以自动在所有已知的spec_string转换上进行测试。

我们可以一起完成这个任务。

1
一些平台（例如OS X）将为navigator.userAgent提供不同的输出，您无法通过“Opera”字符串识别Opera浏览器，而是要使用“OPR”。 - trainoasis
1
如果tem！=null，则get_browser和get_browser_version在“if trident”和“if chrome”条件语句中返回不正确的详细信息。 - Pixelthis
1
返回 Chrome 以用于 Edge 浏览器。 - GorvGoyl
1
返回使用Edge浏览器的Chrome - GorvGoyl
你们能否给我发送一个spec_string/userAgent，其中包含你们所知道的浏览器名称和版本？ - john-jones
72

以下是截至2019年5月处理浏览器检测的几个知名库。

Bowser 由 lancedikson 开发 - 3761个星 - 最近更新于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/bowser@2.4.0/es5.js"></script>

*基于Chromium内核支持Edge

bestiejs的Platform.js - 2,250个★ - 最后更新于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>

jQuery Browser 由 gabceb 开发 - 504 星 - 最后更新于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>

Detect.js（已存档） （作者：darcyclarke，收获522个星，上次更新于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>

Browser Detect (Archived) by 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风格的问题。浏览器检测实际上只是为了为不同的浏览器提供定制的图像、下载文件或说明。

进一步阅读

58

以下是将Kennebec（K）的答案与Hermann Ingjaldsson（H）的答案结合起来：

  • 保留原始答案的最小代码。(K)
  • 与Microsoft Edge兼容。(K)
  • 扩展导航器对象，而不是创建新变量/对象。(K)
  • 将浏览器版本和名称分开成独立的子对象。(H)

 

    navigator.browserSpecs = (function(){
        var ua = navigator.userAgent, tem, 
            M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
        if(/trident/i.test(M[1])){
            tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
            return {name:'IE',version:(tem[1] || '')};
        }
        if(M[1]=== 'Chrome'){
            tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
            if(tem != null) return {name:tem[1].replace('OPR', 'Opera'),version:tem[2]};
        }
        M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
        if((tem = ua.match(/version\/(\d+)/i))!= null)
            M.splice(1, 1, tem[1]);
        return {name:M[0], version:M[1]};
    })();

    console.log(navigator.browserSpecs); //Object { name: "Firefox", version: "42" }

    if (navigator.browserSpecs.name == 'Firefox') {
        // Do something for Firefox.
        if (navigator.browserSpecs.version > 42) {
            // Do something for Firefox versions greater than 42.
        }
    }
    else {
        // Do something for all other browsers.
    }

我们可以给 M 和 tem 取什么有意义的名字呢？我在考虑使用 broserName 和 version。 - Ray_Poly
我们可以给M和tem起一个有意义的名字吗？我在考虑使用broserName和version。 - undefined
30

JavaScript库bowser提供了此功能。

if (bowser.msie && bowser.version <= 6) {
  alert('Hello China');
}

看起来维护得很好。

18
7
已过时的引用，不再受支持-“此页面曾包含我的浏览器检测脚本，但我发现我没有足够的时间来保持它的更新。因此我已将其删除。” - Victor Zakharov
16
我正在寻找一种解决方案，因为jQuery 1.9.1及以上版本已经移除了$.browser功能。我想出了这个小函数，适合我的需求。 为了检查浏览器类型，它确实需要一个全局变量（我把它叫做_browser）。我写了一个jsfiddle来说明如何使用它，当然也可以通过添加对_browser.foo的测试来扩展其他浏览器（其中foo是浏览器的名称）。我只测试了流行的浏览器。

detectBrowser()

_browser = {};

function detectBrowser() {
  var uagent = navigator.userAgent.toLowerCase(),
      match = '';
    
  _browser.chrome  = /webkit/.test(uagent)  && /chrome/.test(uagent)      &&
                     !/edge/.test(uagent);

  _browser.firefox = /mozilla/.test(uagent) && /firefox/.test(uagent);

  _browser.msie    = /msie/.test(uagent)    || /trident/.test(uagent)     ||
                     /edge/.test(uagent);

  _browser.safari  = /safari/.test(uagent)  && /applewebkit/.test(uagent) &&
                     !/chrome/.test(uagent);

  _browser.opr     = /mozilla/.test(uagent) && /applewebkit/.test(uagent) &&
                     /chrome/.test(uagent)  && /safari/.test(uagent)      &&
                     /opr/.test(uagent);

  _browser.version = '';
    
  for (x in _browser) {
    if (_browser[x]) {

      match = uagent.match(
                new RegExp("(" + (x === "msie" ? "msie|edge" : x) + ")( |\/)([0-9]+)")
              );

      if (match) {
        _browser.version = match[3];
      } else {
        match = uagent.match(new RegExp("rv:([0-9]+)"));
        _browser.version = match ? match[1] : "";
      }
      break;
    }
  }
  _browser.opera = _browser.opr;
  delete _browser.opr;
}

detectBrowser();

console.log(_browser)

要检查当前浏览器是否为Opera，您需要执行以下操作

if (_browser.opera) { // Opera specific code }

编辑：修复了格式，修复了IE11和Opera/Chrome的检测，将结果从result改为browserResult。现在_browser键的顺序不重要了。更新了jsFiddle链接。

2015/08/11 编辑：添加了Internet Explorer 12（EDGE）的新测试用例，修复了一个小的正则表达式问题。更新了jsFiddle链接。

1
对于 Windows 10 中的新版 IE Edge（又称 Spartan），它显示我的浏览器是 Chrome 42 --- 用户代理字符串：mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/42.0.2311.135 safari/537.36 edge/12.10240 该浏览器为 Chrome 42。 - Rulisp
1
感谢@Rulisp的评论和提供的样本uagent，因为我没有Edge或Win10。根据它，我已经更新了jsFiddle中的代码以反映这一点。如果您想使用您给我的示例uagent进行测试，请转到[此fiddle]（http://jsfiddle.net/VhaqM/165/）。如果有什么问题，请告诉我。 - Danail Gabenski
15
function BrowserCheck()
{
    var N= navigator.appName, ua= navigator.userAgent, tem;
    var M= ua.match(/(opera|chrome|safari|firefox|msie|trident)\/?\s*(\.?\d+(\.\d+)*)/i);
    if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) {M[2]=tem[1];}
    M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
    return M;
}

这将返回一个数组，第一个元素是浏览器名称，第二个元素是完整的版本号以字符串格式表示。

9
这是有关新版Edge Chromium对Fzs2和Kennebec的更新。 

function get_browser() {
    var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 
    if(/trident/i.test(M[1])){
        tem=/\brv[ :]+(\d+)/g.exec(ua) || []; 
        return {name:'IE',version:(tem[1]||'')};
        }   
    if(M[1]==='Chrome'){
        tem=ua.match(/\bEdg\/(\d+)/)
        if(tem!=null)   {return {name:'Edge(Chromium)', version:tem[1]};}
        tem=ua.match(/\bOPR\/(\d+)/)
        if(tem!=null)   {return {name:'Opera', version:tem[1]};}
        }   
    M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
    return {
      name: M[0],
      version: M[1]
    };
 }

var browser=get_browser(); // browser.name = 'Edge(Chromium)'
                           // browser.version = '86'

console.log(browser);

8

在纯Javascript中，您可以对navigator.userAgent进行RegExp匹配，以查找Firefox版本：

var uMatch = navigator.userAgent.match(/Firefox\/(.*)$/),
    ffVersion;
if (uMatch && uMatch.length > 1) {
    ffVersion = uMatch[1];
}

如果不是Firefox浏览器，则ffVersion将为undefined。 查看工作示例 →
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接