我一直在寻找可以检测访问网站的用户使用的是火狐3还是火狐4的代码。我所找到的只是检测浏览器类型而不是版本的代码。

如何检测这样的浏览器版本?


当前回答

var ua = navigator.userAgent;

if (/Firefox\//.test(ua))
   var Firefox = /Firefox\/([0-9\.A-z]+)/.exec(ua)[1];

其他回答

检测浏览器及其版本

此代码片段基于MDN的文章。他们给出了可以用来检测浏览器名称的各种关键字的简短提示。

为了检测Edge和UCBrowser这样的浏览器,我做了一些改动

getBrowser = () => { const userAgent = navigator.userAgent; let browser = "unkown"; // Detect browser name browser = (/ucbrowser/i).test(userAgent) ? 'UCBrowser' : browser; browser = (/edg/i).test(userAgent) ? 'Edge' : browser; browser = (/googlebot/i).test(userAgent) ? 'GoogleBot' : browser; browser = (/chromium/i).test(userAgent) ? 'Chromium' : browser; browser = (/firefox|fxios/i).test(userAgent) && !(/seamonkey/i).test(userAgent) ? 'Firefox' : browser; browser = (/; msie|trident/i).test(userAgent) && !(/ucbrowser/i).test(userAgent) ? 'IE' : browser; browser = (/chrome|crios/i).test(userAgent) && !(/opr|opera|chromium|edg|ucbrowser|googlebot/i).test(userAgent) ? 'Chrome' : browser;; browser = (/safari/i).test(userAgent) && !(/chromium|edg|ucbrowser|chrome|crios|opr|opera|fxios|firefox/i).test(userAgent) ? 'Safari' : browser; browser = (/opr|opera/i).test(userAgent) ? 'Opera' : browser; // detect browser version switch (browser) { case 'UCBrowser': return `${browser}/${browserVersion(userAgent,/(ucbrowser)\/([\d\.]+)/i)}`; case 'Edge': return `${browser}/${browserVersion(userAgent,/(edge|edga|edgios|edg)\/([\d\.]+)/i)}`; case 'GoogleBot': return `${browser}/${browserVersion(userAgent,/(googlebot)\/([\d\.]+)/i)}`; case 'Chromium': return `${browser}/${browserVersion(userAgent,/(chromium)\/([\d\.]+)/i)}`; case 'Firefox': return `${browser}/${browserVersion(userAgent,/(firefox|fxios)\/([\d\.]+)/i)}`; case 'Chrome': return `${browser}/${browserVersion(userAgent,/(chrome|crios)\/([\d\.]+)/i)}`; case 'Safari': return `${browser}/${browserVersion(userAgent,/(safari)\/([\d\.]+)/i)}`; case 'Opera': return `${browser}/${browserVersion(userAgent,/(opera|opr)\/([\d\.]+)/i)}`; case 'IE': const version = browserVersion(userAgent,/(trident)\/([\d\.]+)/i); // IE version is mapped using trident version // IE/8.0 = Trident/4.0, IE/9.0 = Trident/5.0 return version ? `${browser}/${parseFloat(version) + 4.0}` : `${browser}/7.0`; default: return `unknown/0.0.0.0`; } } browserVersion = (userAgent,regex) => { return userAgent.match(regex) ? userAgent.match(regex)[2] : null; } console.log(getBrowser());

我使用这段javascript代码的基础上,我可以在其他帖子中找到。

var browserHelper = function () { var self = {}; /// IE 6+ self.isIEBrowser = function () { return /*@cc_on!@*/false || !!document.documentMode; }; /// Opera 8.0+ self.isOperaBrowser = function () { return (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; }; /// Firefox 1.0+ self.isFirefoxBrowser = function () { return typeof InstallTrigger !== 'undefined'; }; /// Safari 3.0+ self.isSafariBrowser = function () { return /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification)); }; /// Edge 20+ self.isEdgeBrowser = function () { return !self.isIEBrowser() && !!window.StyleMedia; }; /// Chrome 1 - 87 self.isChromeBrowser = function () { return (!!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime)) || (navigator.userAgent.indexOf("Chrome") > -1) && !self.isOperaBrowser(); }; /// Edge (based on chromium) self.isEdgeChromiumBrowser = function () { return self.isChromeBrowser() && (navigator.userAgent.indexOf("Edg") != -1); }; /// Blink self.isBlinkBasedOnBrowser = function () { return (self.isChromeBrowser() || self.isOperaBrowser()) && !!window.CSS; }; /// Returns the name of the navigator self.browserName = function () { if (self.isOperaBrowser()) return "Opera"; if (self.isEdgeBrowser()) return "Edge"; if (self.isEdgeChromiumBrowser()) return "Edge (based on chromium)"; if (self.isFirefoxBrowser()) return "Firefox"; if (self.isIEBrowser()) return "Internet Explorer"; if (self.isSafariBrowser()) return "Safari"; if (self.isChromeBrowser()) return "Chrome"; return "Unknown"; }; return self; }; var bName = document.getElementById('browserName'); bName.innerText = browserHelper().browserName(); #browserName { font-family: Arial, Verdana; font-size: 1.2rem; color: #ff8000; text-align: center; border: 2px solid #ff8000; border-radius: .5rem; padding: .5rem; max-width: 25%; margin: auto; } <div id="browserName"></div>

var ua = navigator.userAgent;

if (/Firefox\//.test(ua))
   var Firefox = /Firefox\/([0-9\.A-z]+)/.exec(ua)[1];

这里有更好的兼容性@kennebec snippet; 将返回浏览器名称和版本(返回72而不是72.0.3626.96)。

在Safari, Chrome, Opera, Firefox, IE, Edge, UCBrowser上测试,也在移动设备上测试。

function browser() {
    var userAgent = navigator.userAgent,
        match = userAgent.match(/(opera|chrome|crios|safari|ucbrowser|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [],
        result = {},
        tem;

    if (/trident/i.test(match[1])) {
        tem = /\brv[ :]+(\d+)/g.exec(userAgent) || [];
        result.name = "Internet Explorer";
    } else if (match[1] === "Chrome") {
        tem = userAgent.match(/\b(OPR|Edge)\/(\d+)/);

        if (tem && tem[1]) {
            result.name = tem[0].indexOf("Edge") === 0 ? "Edge" : "Opera";
        }
    }
    if (!result.name) {
        tem = userAgent.match(/version\/(\d+)/i); // iOS support
        result.name = match[0].replace(/\/.*/, "");

        if (result.name.indexOf("MSIE") === 0) {
            result.name = "Internet Explorer";
        }
        if (userAgent.match("CriOS")) {
            result.name = "Chrome";
        }

    }
    if (tem && tem.length) {
        match[match.length - 1] = tem[tem.length - 1];
    }

    result.version = Number(match[match.length - 1]);

    return result;
}

这是对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转换上自动对其进行测试。

我们可以一起做这件事。