js判斷chrome和360極速瀏覽器和360安全瀏覽器

在做項目的時候有用到判斷不同瀏覽器的這個需求，然後就是按部就班的根據window.navigator對象裏面的user-agent屬性來判斷，如果你以爲就這麼簡單的話那就錯來。以下是我自己遇到的幾個坑，在此記錄以下

1.360瀏覽器在不同域名訪問的情況下user-agent是不一樣的，比如說在https://hao.360.com/這個域名下，展示爲

從其他域名訪問如下：

通過上面兩張圖片可以看出想單獨的依靠user-agent來判斷360瀏覽器是行不通的。然後借鑑網上其他朋友的另外一種方法，判斷mimeTypes，具體就是說360極速瀏覽器的這個屬性裏面會有一個mimeTypes的的type屬性爲application/vnd.chromium.remoting-viewer

以下兩張圖片分別展示windows上面谷歌瀏覽器和360極速瀏覽器中不同的mimetypes

 

 

 

具體代碼如下：如果是360極速則返回true，否則false。

var is360js = _mime("type", "application/vnd.chromium.remoting-viewer");
      //判斷mime
     function _mime(option, value) {
        //debugger;
        let mimeTypes = navigator.mimeTypes;
        for (var mt in mimeTypes) {
          console.log('type:',mimeTypes[mt][option]);
          if (mimeTypes[mt][option] == value) {
            return true;
          }
        }
        return false;
      },

這個方法確實可行，但是僅僅只限於在windows電腦上，在mac上我發現谷歌瀏覽器和360極速瀏覽器裏面的mimeTypes是完全一樣的，所以根據這個方法也不行，存在兼容性問題，大家自己也可以測試一下。之後又是一通亂七八糟的百度着答案，花費來許久也沒有找到解決方案，然後自己在兩個不同的瀏覽器中反覆的查看navigator有什麼不同之處，最後還確實發現了一點問題，--------------------在谷歌瀏覽器的navigator對象裏面存在userActivation屬性，而在360極速裏面卻沒有

 

谷歌：

 

360極速：

 

所以我就根據這個屬性來判斷測試後發現確實可行。具體代碼如下：

      var is360 = is360ByUserActivationProperty();
      //根據userActivation屬性來判斷360極速
      function is360ByUserActivationProperty(){
        //debugger;
        let navigator = window.navigator;
        if(navigator.userActivation){
          return false;//chrome
        }else{
          return true;//360極速
        }
      },

總結：這個方法沒有具體的在不同的瀏覽器之間做過測試所以不知道可用性高不高以及瀏覽器不同版本之間會不會有兼容性問題，所以大家可以借鑑一下，如果哪位朋友有更好的方法也希望可以給我指點一下！！！