前端浏览器环境检测

效果图：

 

 

 

// getClientRecond.js
const getClientRecond = {
    sys: "other",
    sysVersion: "",
    browser: "",
    browserVersion: "",
    token: "",
    userId: "",
    sysBits:"",
    url: location.href,
    referer: document.referrer,
    init: function () {
        this.getSystem();
        this.getBrowser();
        this.getToken();
    },
    getSystem: function () {
        let os = navigator.platform;
        let userAgent = navigator.userAgent;
        if (os.indexOf("Win") > -1) {
            this.sys = "Windows";
            if (userAgent.indexOf("Windows NT 5.0") > -1) {
                this.sysVersion = "2000";
            } else if (userAgent.indexOf("Windows NT 5.1") > -1) {
                this.sysVersion = "XP";
            } else if (userAgent.indexOf("Windows NT 5.2") > -1) {
                this.sysVersion = "2003";
            } else if (userAgent.indexOf("Windows NT 6.0") > -1) {
                this.sysVersion = "Vista";
            } else if (userAgent.indexOf("Windows NT 6.1") > -1 || userAgent.indexOf("Windows 7") > -1) {
                this.sysVersion = "7";
            } else if (userAgent.indexOf("Windows 8") > -1) {
                this.sysVersion = "8";
            } else if (userAgent.indexOf("Windows NT 10.0") > -1) {
                this.sysVersion = "10";
            } else {
                this.sysVersion = "other";
            }
            if(userAgent.indexOf("win64") >= 0 || userAgent.indexOf("wow64") >= 0){
                this.sysBits="64";
            }else{
                this.sysBits="32";
            }
        }
        if (os.indexOf("Mac") > -1) {
            this.sys = "Mac";
        }
        if (os.indexOf("X11") > -1) {
            this.sys = "Unix";
        }
        if (os.indexOf("Linux") > -1) {
            this.sys = "Linux";
        }
    },
    getBrowser: function () {
        let userAgent = navigator.userAgent.toLowerCase();
        let regStr_ie = /msie [\d.]+;/gi;
        let regStr_iee = /rv:[\d.]+\)/gi;
        let regStr_ff = /firefox\/[\d.]+/gi;
        let regStr_chrome = /chrome\/[\d.]+/gi;
        let regStr_saf = /safari\/[\d.]+/gi;
        if (userAgent.indexOf("trident") > 0) {
            this.browser="IE";
            if(userAgent.indexOf("msie") > 0){
                if(userAgent.indexOf("rv:")>0){
                    this.browserVersion=userAgent.match(regStr_iee)[0].replace(/[^0-9.]/ig, "");
                }else{
                    this.browserVersion=userAgent.match(regStr_ie)[0].replace(/[^0-9.]/ig, "");
                }
            }else{
                this.browserVersion=userAgent.match(regStr_iee)[0].replace(/[^0-9.]/ig, "");
            }
        }
        if (userAgent.indexOf("firefox") > 0) {
            this.browser = "Firefox";
            this.browserVersion = userAgent.match(regStr_ff)[0].replace(/[^0-9.]/ig, "");
        }
        if (userAgent.indexOf("chrome") > 0) {
            this.browser = "Chrome";
            this.browserVersion = userAgent.match(regStr_chrome)[0].replace(/[^0-9.]/ig, "");
        }
        if (userAgent.indexOf("safari") > 0 && userAgent.indexOf("chrome") < 0) {
            this.browser = "Safari";
            this.browserVersion = userAgent.match(regStr_saf)[0].replace(/[^0-9.]/ig, "");
        }
    },
    getToken: function () {
        let cookieStr = JSON.parse(localStorage.getItem("zqyl-web"));
        this.token = cookieStr ? cookieStr.token : "";
        this.userId = cookieStr ? cookieStr.uid : "";
    },
    parseParams: function (data) {
        try {
            let tempArr = [];
            for (let i in data) {
                let key = encodeURIComponent(i);
                let value = encodeURIComponent(data[i]);
                tempArr.push(key + '=' + value);
            }
            let urlParamsStr = tempArr.join('&');
            return urlParamsStr;
        } catch (err) {
            return '';
        }
    },
    submit: function (handleEvent, submitID) {
        let options = {
            "load": handleEvent,
            "userId": this.userId,
            "equipmentId": "",
            "system": this.sys,
            "systemEdition": this.sysVersion,
            "browser": this.browser,
            "browserEdition": this.browserVersion,
            "token": this.token || "",
            "accessUrl": this.url,
            "beforeUrl": this.referer,
            "loadId": submitID,
            "source": "PC"
        }
        let createScript = document.createElement('script');
        createScript.type = "text/javascript";
        createScript.src = "https://app.yljr.com:8047/record/pcevent?" + this.parseParams(options);
        document.body.appendChild(createScript);
    }
}
getClientRecond.init()
export default getClientRecond;

// 引入页面
import getClientRecond from "./config/getClientRecond";
export default {
  data () {
    return {
      getClientRecond
      }
   }
}

<div class="link_register_button" v-if="!(getClientRecond.browser == 'IE' && getClientRecond.browserVersion >= 9)">
   <p>环境检测</p>
   <p>系统检测到您当前的环境是当前浏览器{{getClientRecond.browser}}/{{getClientRecond.browserVersion}}</p>
   <p>建议您切换到IE9.0及以上环境下进行访问</p>
      <p>推荐如下浏览器：
         <a href="https://browser.360.cn/se/linux/index.html" style="margin-right: 10px">360安全浏览器</a>
         <a href="https://www.microsoft.com/zh-cn/download/internet-explorer.aspx">IE浏览器</a>
      </p>
</div>

 

.link_register_button{
  width: 92%;
  background: #F3F3F3;
  border-radius: 4px;
  padding: 16px 15px;
  font-size: 12px;
  font-weight: 400;
  color: #333333;
  line-height: 25px;
  p:first-child{
    font-size: 14px;
    color: #555555;
  }
  p:nth-child(2){
    color: #F5222D;
  }
  a{
    color: #1890FF;
  }
}