浏览器版本 / 设备系统 检测

browser-detection.js

var uaInfo = window.navigator.userAgent.toLowerCase();
var rMsie = /(msies|trident.*rv:)([w.]+)/;
var rFirefox = /(firefox)/([w.]+)/;
var rOpera = /(opera).+version/([w.]+)/;
var rChrome = /(chrome)/([w.]+)/;
var rSafari = /version/([w.]+).*(safari)/;
// win7及以上版本操作系统chrome浏览器最低版本
var specifiedChrome = {
   os: 'win7+',
   version: '61'
};
// winXP操作系统chrome浏览器最低版本
var winXPSpecifiedChrome = {
   os: 'winXP',
   version: '49'
};

var browser = {
   /**
    * 检测是否是指定浏览器
    * @return {
    *              browserCanUse: '当前浏览器是否可用，Boolean 值',
    *              code: '是指定浏览器时以2开头，2001:一切符合要求，2002:浏览器版本不符合要求；
    *                   不是指定浏览器时以3开头，3001:系统符合要求浏览器不符合要求，3002:系统不符合要求',
    *              os: '当前操作系统，win7+: win7及以上系统，winXP: winXP系统，win7-:非 win7+ 或 winXP，其他如 mac则返回 mac',
    *              version: '指定浏览器 且是 Windows系统 时方给放回该字段'
    *           }
    *
    */
   detectingBrowser () {
      var matchBS = rChrome.exec(uaInfo);
      var os = this.getDeviceOS();
      // 如果是指定浏览器，这则判断浏览器版本是否与系统版本相符
      if (matchBS != null) {
         var version = matchBS[2];
         var majorVersion = version.split('.')[0];
         // 如果是win7+系统且是61版本||winXP系统且是49版本
         if ((os === specifiedChrome.os && majorVersion === specifiedChrome.version) ||
            (os === winXPSpecifiedChrome.os && majorVersion === winXPSpecifiedChrome.version)) {
            return {
               os: os,
               version: version,
               browserCanUse: true,
               code: '2001'
            };
         } else {
            return {
               os: os,
               version: version,
               browserCanUse: false,
               code: '2002'
            };
         }
      } else {
         // 非Windows系统
         if (os.indexOf('win') === -1) {
            return {
               os: os,
               browserCanUse: false,
               code: '3002'
            };
         }
         // Windows系统但非指定浏览器
         return {
            os: os,
            browserCanUse: false,
            code: '3001'
         };
      }
   },
   /**
    * 获取当前操作系统及其版本
    * @return {*}
    */
   getDeviceOS () {
      var osName;
      // windows 系统
      if (uaInfo.indexOf('windows') != -1) {
         var winVer = Number(uaInfo.substr(uaInfo.indexOf('windows nt ') + 11, 4));
         // win7 及以上
         if (winVer > 6.1) {
            osName = 'win7+';
            // winXP
         } else if (winVer === 5.1) {
            osName = 'winXP';
         } else {
            osName = 'win7-';
         }
      } else if (uaInfo.indexOf('mac') != -1) {
         osName = 'mac';
      } else if (uaInfo.indexOf('linux') != -1) {
         osName = 'linux';
      } else if (uaInfo.indexOf('x11') != -1) {
         osName = 'unix';
      } else {
         osName = 'unknown';
      }
      return osName;
   },
   /**
    *  获取当前浏览器及其版本
    *  主要是判断是否是chrome内核浏览器
    * @return {*}
    */
   getBrowser () {
      var match = null;
      match = rMsie.exec(uaInfo);
      if (match != null) {
         return {
            browser: 'IE',
            version: match[2] || '0'
         };
      }
      match = rFirefox.exec(uaInfo);
      if (match != null) {
         return {
            browser: match[1] || '',
            version: match[2] || '0'
         };
      }
      match = rOpera.exec(uaInfo);
      if (match != null) {
         return {
            browser: match[1] || '',
            version: match[2] || '0'
         };
      }
      match = rChrome.exec(uaInfo);
      if (match != null) {
         return {
            browser: match[1] || '',
            version: match[2] || '0'
         };
      }
      match = rSafari.exec(uaInfo);
      if (match != null) {
         return {
            browser: match[2] || '',
            version: match[1] || '0'
         };
      }
      // 如果获取不到浏览器信息
      if (match != null) {
         return {
            browser: '',
            version: '0'
         };
      }
   }
};
window.browserDetection = browser;

在index.html中通过script标签引入后，即可通过window.browserDetection来获取

<script src="./utils/browser-detection.js"></script>

<script>
        (function () {
            /*
             * detectingBrowser()
             * 检测是否是科达浏览器
             * @return {
             *                 browserCanUse: '当前浏览器是否可用，Boolean 值',
             *                 code: '是科达浏览器时以2开头，2001:一切符合要求，2002:浏览器版本不符合要求；
             *                      不是科达浏览器时以3开头，3001:系统符合要求浏览器不符合要求，3002:系统不符合要求',
             *                 os: '当前操作系统，win7+: win7及以上系统，winXP: winXP系统，win7-:非 win7+ 或 winXP，其他如 mac则返回 mac',
             *                 version: '科达浏览器 且是 Windows系统 时方给放回该字段'
             *             }
             *
             * getDeviceOS()
             * 获取当前设备的操作系统
             * @return String 操作系统名称 win7+: win7及以上版本系统，winXP: winXP系统，win7-: win7以下版本系统，
             *                               mac: mac系统，linux: Linux系统，unix: Unix系统，other: 其他系统
             *
             * getBrowser()
             * 获取当前浏览器内核版本
             * @return {
             *                 browser: '当前浏览器内核名称', // IE firefox opera chrome safari chrome-keda
             *                 version: '当前浏览器内核版本号'
             *             }
             *
             */
            var browser = window.browserDetection.getBrowser();
            var os = window.browserDetection.getDeviceOS();
            var checkBS = window.browserDetection.detectingBrowser();
            console.log('111--browser----', browser);
            console.log('222--os----', os);
            console.log('333--checkBS----', checkBS);
            if (!checkBS.browserCanUse) {
                if (checkBS.code === '3002') {
                    alert('当前设备的操作系统不是Windows系统，请更换！');
                    return;
                }
                if (checkBS.code === '3001') {
                    alert('当前浏览器不是指定的科达版本谷歌浏览器，请下载！');
                    return;
                }
                if (checkBS.code === '2002') {
                    alert('当前版本浏览器(' + checkBS.version + ')与当前设备的操作系统(' + checkBS.os + ')不匹配，请更换！');
                }
            } else {
                alert('当前操作系统' + checkBS.os + '，当前浏览器版本' + checkBS.version);
            }
        })();
    </script>