判斷瀏覽器類型及是否能使用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文件哦~~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章