js获取、比较浏览器名称和版本号的简便方法

发表于 | 分类于

1、对浏览器的UA进行查询，获取当前浏览器的名称和版本号：

1
2
3
4
5
6
7
8
9
10
11
12
13
getBrowserInfo(){
  let agent = navigator.userAgent.toLowerCase() ;
  let regStr_ie = /msie [\d.]+;/gi ;
  let regStr_ff = /firefox\/[\d.]+/gi
  let regStr_chrome = /chrome\/[\d.]+/gi ;
  let regStr_saf = /safari\/[\d.]+/gi ;
  let regStr_safVersion = /version\/[\d.]+/gi ;
  //IE
  if(agent.indexOf("msie")>0){return agent.match(regStr_ie) ;}    //firefox    if(agent.indexOf("firefox")>0){return agent.match(regStr_ff) ;}    //Chrome    if(agent.indexOf("chrome")>0){return agent.match(regStr_chrome) ;}    //Safari    if(agent.indexOf("safari")>0 && agent.indexOf("chrome")<0){
   let bro= agent.match(regStr_saf)[0].split('/')[0];
   let ver = agent.match(regStr_safVersion)[0].split('/')[1];
   let user = bro+'/'+ver;
   return [user];    }  },

注：由于早期浏览器之间相互抄袭伪装，导致其UA可能包含其他浏览器的信息，例如：chrome的UA可能为：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.24(KHTML, like Gecko) Chrome/11.0.696.65 Safari/534.24

因此chrome和safari的版本号要依据情况单独处理，以上函数返回包含浏览器名称和版本号的数组；

2、获取到版本号后，可用下面的方法进行版本大小判断，版本号可能包含两个小数点，因此分别比较：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
compareBrowser(ver1,ver2) {
  let version1pre = parseFloat(ver1);
  let version2pre = parseFloat(ver2);
  let version1next =  ver1.replace(version1pre + ".","");
  let version2next =  ver2.replace(version2pre + ".","");
    if(version1pre > version2pre){
      return true;
    }else if(version1pre < version2pre){
      return false;
    }else{
      if(version1next >= version2next){
        return true;
      }else{
        return false;
      }
    }
},

3、调用上述两个方法，可以获取和比较浏览器的名称，对低版本的用户做出提示，操作如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
checkBrowser(context){
    let info = this.getBrowserInfo()[0].split('/');
    let browser = info[0];
    let version = info[1];
    if(browser==='chrome'){
      let flag = this.compareBrowser(version,'61.0');
      if(!flag){
        context.$router.push('/error');
      }
    }
    else if(browser==='firefox'){
      let flag = this.compareBrowser(version,'55.0');
      if(!flag){
        context.$router.push('/error');
      }
    }
    else if(browser==='safari'){
      let flag = this.compareBrowser(version,'8.08');
      if(!flag){
        context.$router.push('/error');
      }
    }
  },

注：上述方法是在vue2.0下调用比较函数对浏览器版本进行判断，当版本低于指定版本时进行页面跳转；