判断浏览器类型及是否能使用ES6部分特性

工作需要判断当前浏览器是否能使用ES6特性;

1、首先肯定要先判断当前浏览器的类型

2、然后判断该浏览器是否支持ES6的部分特性;


解决1:

var userAgent = navigator.userAgent;
//Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.170 Safari/537.36 OPR/53.0.2907.99
var isOpera = userAgent.indexOf("OPR") > -1; //判断是否Opera浏览器  
//Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
var isIE11 = userAgent.indexOf("rv") > -1; //判断是否IE浏览器 
//Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
var elseIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
//Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器 
//Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.1 Safari/603.1.30 
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器  
//Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36
var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1 ; //判断Chrome浏览器 

当时为了判断当前浏览器的类型,在网上看了很多各个浏览器navigator.userAgent,来帮助我写判断语句,但是总存在一点问题,不知道自己是用的不对还是怎样,所以索性就把主流浏览器都安装了个遍,然后总结归纳找不同,如上~~~应该是没哈问题的啦


解决2

当时做的时候,偷个小懒,上网查查有木有什么插件或者库可以直接用的,哈哈哈,然后就发现了一个ES6的功能检测库es-checker

具体用法可以看看http://www.ruanyifeng.com/blog/2015/06/es-checker.html

但是我建议还是下载到本地吧,我当时直接用cdn的时候又出现问题~~~

然后举个例子--->我是利用正则加上es-checker来判断当前浏览器是否支持ES6的let、const

var Sys = {};
var supES6 = "no";
if (isOpera) {  
    Sys.opera = userAgent.match(/OPR\/([\d.]+)/)[1];
    if(Supports.letConst){
      supES6 = "yes";
      }
     console.log("Opera"+' '+Sys.opera+' '+supES6);
     } 

else if (isFF) { 
    Sys.firefox = userAgent.match(/Firefox\/([\d.]+)/)[1];
    if(Supports.letConst){
       supES6 = "yes";
    }
    console.log("Firefox"+' '+Sys.firefox+' '+supES6);
} 
                
else  if (isSafari) {  
      Sys.safari = userAgent.match(/Safari\/([\d.]+)/)[1];
      if(Supports.letConst){
         supES6 = "yes";
      }
      console.log("Safari"+' '+Sys.safari+' '+supES6);
}  

else   if (isChrome) { 
       Sys.chrome = userAgent.match(/Chrome\/([\d.]+)/)[1];
       if(Supports.letConst){
          supES6 = "yes";
       }
       console.log("Chrome"+' '+Sys.chrome+' '+supES6);
} 

else if(isIE11){
     Sys.ie = userAgent.match(/rv:([\d.]+)/)[1];
     if(Supports.letConst){
        supES6 = "yes";
     }
     console.log("IE"+' '+Sys.ie+' '+supES6);
}
                
else  if (elseIE) { 
      Sys.elseIE = userAgent.match(/MSIE\s([\d.]+)/)[1];
      if(Supports.letConst){
         supES6 = "yes";
      }
      console.log("IE-low"+' '+Sys.elseIE+' '+supES6);
} 

以上呢,就是我的代码啰,放在一个函数里面直接应用,然后记得引入es-checker.js文件哦~~

你可能感兴趣的:(前端学习)