vue 判断是否是360浏览器，检测是否安装某个插件

新年第一帖~

项目中有个场景：

1、需要判断当前访问的浏览器是否是360浏览器

2、360浏览器是否安装了vlc插件

3、如果未安装则提供浏览器插件下载入口

直接贴代码吧，注释写的比较清晰了

初始化代码：

  mounted() {
    // eslint-disable-next-line no-unused-expressions
    navigator.plugins.refresh();
    if (this.isNumberBrowser()) { // 判断是否是360浏览器
      if (this.checkPlugins('vlc')) { // 判断是否安装了vlc插件
        // ...
      } else {
        this.$confirm('是否安装视频播放插件', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.downloadFile('/vlc-3.0.12-win32.exe', 'vlc-3.0.12-win32.exe'); // 下载插件
        });
      }
    } else {
      this.$notify({
        title: '提示',
        message: '请使用360浏览器访问',
        type: 'warning'
      });
    }
  },

?方法：

methods: {
    // 检测是否已安装指定插件，pluginName：插件名称，例如：vlc
    checkPlugins(pluginName) {
      var np = navigator.plugins;
      if (window.ActiveXObject) {
        // IE
        // ActiveXObject的对象名
        var activexObjectName = pluginName + '.' + pluginName;
        try {
          // eslint-disable-next-line no-eval
          var axobj = eval('new ActiveXObject(activexObjectName);');
          // 将对象转化为布尔类型
          return !!axobj;
        } catch (e) {
          return false;
        }
      } else if (np && np.length) {
        // 非IE
        for (var i = 0; i < np.length; i++) {
          if (np[i].name.toLowerCase().indexOf(pluginName.toLowerCase()) != -1) {
            return true;
          }
        }
        return false;
      } else {
        // 其他则返回false
        return false;
      }
    },
    checkIeForNum() {
      return ((navigator.msPointerEnabled == undefined ? true : navigator.msPointerEnabled) &&
        (navigator.msDoNotTrack == 1 || window.doNotTrack == 1) &&
        ((Number(window.screenX) ? (window.screenLeft - window.screenX != 8) : false) ||
          ((navigator.userAgent.indexOf('MSIE 7.0') != -1 || navigator.userAgent.indexOf('MSIE 8.0') != -1) && console.count == undefined)));
    },
    checkChromeForNum() {
      const uas = navigator.userAgent.split(' ');
      const result = false;
      if (uas[uas.length - 1].indexOf('Safari') == -1) {
        return result;
      }
      for (var key in navigator.plugins) {
        if (navigator.plugins[key].filename == 'np-mswmp.dll') {
          return !result;
        }
      }
      return result;
    },
    // 判断是否是360浏览器
    isNumberBrowser() {
      if (navigator.userAgent.indexOf('Safari') != -1) {
        return this.checkChromeForNum();
      } else {
        return this.checkIeForNum();
      }
    },
    // 文件下载
    downloadFile(fileUrl, fileName = new Date().valueOf().toString()) {
      fetch(fileUrl).then(res =>
        res.blob().then(blob => {
          const a = document.createElement('a');
          const url = window.URL.createObjectURL(blob);
          a.href = url;
          a.download = fileName;
          a.click();
          window.URL.revokeObjectURL(url);
        })
      );
    }
}