关于项目内浏览器限制问题（VUE）

目的：限制项目在某些浏览器中打开

代码位置如图：

1、获取用户代理：navigator.userAgent；

拓展：

属性	输出值
navigator.appCodeName	浏览器代号: Mozilla
navigator.appName	浏览器名称: Netscape
navigator.appVersion	浏览器版本: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36
navigator.cookieEnabled	启用Cookies: true
navigator.platform	硬件平台: Win32
navigator.userAgent	用户代理: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36
navigator.language	用户代理语言: zh-CN

2、通过获取的用户代理进行判断。

1）、关于版本问题

//判断chrome版本问题
function getChromeVersion() {
//通过获取回的值中空格进行分割
      var arr = userAgent.split(" ");
      var chromeVersion = "";
//通过循环及正则判断，获取当前chrome版本号
      for (var i = 0; i < arr.length; i++) {
        if (/chrome/i.test(arr[i]))  chromeVersion = arr[i];
      }
      if (chromeVersion)  return Number(chromeVersion.split("/")[1].split(".")[0]);
        else return false;
    }
//在80版本以上才可使用
    let _is__browser_Error = getChromeVersion() > 80;

2、关于edge、us、qq等浏览器限制。判断【Safari】后边是否有后缀字符串，或者【Chrome】和【Safari】之间有其他标识符。

例：

//判断相关浏览器代码（禁止所有）
let _is_shell = userAgent.substring(userAgent.indexOf("Safari") + 13).length > 5 || userAgent.indexOf("Safari/") - userAgent.indexOf("Chrome/") > 25;

由于项目内需求放开Edge，代码如下：

 function getIsEdge() {
      var edge = userAgent.split(" ");
      var isEdge = ''
      for (var i = 0; i < edge.length; i++) {
//判断相关字符
        if (/Edg/i.test(edge[i])) isEdge = edge[i];
      }
      if (isEdge) return false
      else return userAgent.substring(userAgent.indexOf("Safari") + 13).length > 5 ||
          userAgent.indexOf("Safari/") - userAgent.indexOf("Chrome/") > 25;
    }
    let _is_shell = getIsEdge();

3、关于极速浏览器的限制

// 检测极速内核下的360浏览器
    function checkChromeFor360() {
      var uas = navigator.userAgent.split(' '),
        result = false;
      // 排除ua自带标志的双核浏览器, 余下chrome,chromium及360浏览器
      if (uas[uas.length - 1].indexOf('Safari') == -1) {
        return result;
      }
      for (var key in navigator.plugins) {
        // np-mswmp.dll文件在chromium及chrome未查询到
        if (navigator.plugins[key].filename == 'np-mswmp.dll') {
          return !result;
        }
      }
      return result;
    }

4.最终判断：_is__browser_Error、 _is_shell、 checkChromeFor360()三个相关值进行页面显示。

 if (!_is__browser_Error || _is_shell || checkChromeFor360()) {
      // 异常浏览器的操作
      let __t_m_p = document.getElementById('app');
      let tmp =
        ' <!--<h1>请使用<a style="color: #1b00ff;text-decoration: underline;" >chrome浏览器</a>访问当前页面</h1>--> <div id="loader-wrapper"><div class="loader-section section-left"></div> <div class="load_title"><a href="https://www.google.cn/chrome/">下载Chrome</a></div></div>';
      __t_m_p.innerHTML = tmp;
      __t_m_p.id = 'apps';
    }

完整代码截图：