使用JS判断环境的方法

1. JS navigator对象详解

客户端浏览器每次发送HTTP请求时, 都会附带一个user-agent(用户代理)字符串, 对于Web开发人员来说, 可以使用代理字符串检测浏览器类型.

BOM在navigator对象中定义了userAgent属性, 利用该属性可以捕获客户端的user-agent字符串

navigator 对象存储了与浏览器相关的基本信息，如名称、版本和系统等。通过 window.navigator 可以引用该对象，并利用它的属性来读取客户端基本信息。

以下是实际项目中的例子:

const userAgent = navigator.userAgent.toLowerCase();
console.log('userAgent',userAgent);
//返回类似信息：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
if (userAgent.indexOf('miniprogram') > -1) {
          return 'miniprogram';
        }
        return 'Wechat'
      } else if (userAgent.indexOf('dtdreamweb') > -1) {
        return 'Zheliban'
      } else if (userAgent.indexOf('miniprogram') > -1 && userAgent.indexOf('alipay') > -1) {
        return 'ZhelibanAlipayMini'
      } else if (userAgent.indexOf('alipay') > -1) {
        return 'Alipay'
      } else if (userAgent.indexOf('weibo') > -1) {
        return 'Weibo'
      } else if (userAgent.indexOf('dingtalk') > -1) {
        return 'DingTalk'
      } else if (userAgent.indexOf('citybrain') > -1) {
        return 'CityBrain'
      } else if (userAgent.indexOf('taurusapp') > -1) {
        return 'DingDingGov'
      } else if (!!userAgent.match(/ucbrowser/i)) {
        return 'UCBrowser'
      } else if (!!userAgent.match(/qq/i)) {
        return 'QQ'
      } else if (userAgent.indexOf('mqqbrowser') > -1) {
        return 'QQBrowser'
      } else if (userAgent.indexOf('safari') > -1 && userAgent.indexOf('chrome') === -1) {
        return 'Safari'
      } else if (userAgent.indexOf('chrome') > -1) {
        return 'Chrome'
      } else if (userAgent.indexOf('firefox') > -1) {
        return 'FireFox'
      } else if (userAgent.indexOf('edge') > -1) {
        return 'Edge'
      } else if (userAgent.indexOf('opera') > -1) {
        return 'Opera'
      } else if (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('msie') > -1) {
        return 'IE'
      }
//通过字符串的indexOf方法去检索相应环境的关键字符串,可以判断该客户端运行在什么环境上.

以下是我网上看到的写法: 示例1 - 检测浏览器类型和版本号

var info = {
    ie : /msie/ .test(ua) && !/opera/ .test(ua),  //匹配IE浏览器
    op : /opera/ .test(ua),  //匹配Opera浏览器
    sa : /version.*safari/.test(ua),  //匹配Safari浏览器
    ch : /chrome/.test(ua),  //匹配Chrome浏览器
    ff : /gecko/.test(ua) && !/webkit/.test(ua)  //匹配Firefox浏览器
};

然后在脚本中调用该对象的属性,如果为true, 说明为对应类型浏览器,否则返回false

(info.ie) && console.log("IE浏览器");
(info.ie) && console.log("Opera浏览器");
(info.ie) && console.log("Safari浏览器");
(info.ie) && console.log("Chrome浏览器");
(info.ie) && console.log("Firefox浏览器");

示例2 - 检测操作系统

navigator.userAgent 返回值一般都会包含操作系统的基本信息，不过这些信息比较散乱，没有统一的规则。用户可以检测一些更为通用的信息，如检测是否为 Windows 系统，或者为 Macintosh 系统，而不去分辨操作系统的版本号。 例如，如果仅检测通用信息，那么所有 Windows 版本的操作系统都会包含 “Win”字符串，所有 Macintosh 版本的操作系统都会包含“Mac”字符串，所有 Unix 版本的操作系统都会包含有“X11”，而 Linux 操作系统会同时包含“X11”和“Linux”。

通过下面方法可以快速检测客户端信息中是否包含上述字符串。

['Win', 'Mac', 'X11', 'Linux'].forEach (function (t) {
    (t === 'X11') ? t = 'Unix' : t;  //处理Unix系统的字符串
    navigator['is' + t] = function () {  //为navigator对象扩展专用系统检测方法
        return navigator.userAgent.indexOf(t) != -1;  //检测是否包含特定字符串
    };
});
console.log(navigator.isWin());  //true
console.log(navigator.isMac());  //false
console.log(navigator.isLinux());  //false
console.log(navigator.isUnix());  //false