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

browser-detection.js

  1 var uaInfo = window.navigator.userAgent.toLowerCase();
  2 var rMsie = /(msies|trident.*rv:)([w.]+)/;
  3 var rFirefox = /(firefox)/([w.]+)/;
  4 var rOpera = /(opera).+version/([w.]+)/;
  5 var rChrome = /(chrome)/([w.]+)/;
  6 var rSafari = /version/([w.]+).*(safari)/;
  7 // win7及以上版本操作系统chrome浏览器最低版本
  8 var specifiedChrome = {
  9    os: 'win7+',
 10    version: '61'
 11 };
 12 // winXP操作系统chrome浏览器最低版本
 13 var winXPSpecifiedChrome = {
 14    os: 'winXP',
 15    version: '49'
 16 };
 17 
 18 var browser = {
 19    /**
 20     * 检测是否是指定浏览器
 21     * @return {
 22     *              browserCanUse: '当前浏览器是否可用，Boolean 值',
 23     *              code: '是指定浏览器时以2开头，2001:一切符合要求，2002:浏览器版本不符合要求；
 24     *                   不是指定浏览器时以3开头，3001:系统符合要求浏览器不符合要求，3002:系统不符合要求',
 25     *              os: '当前操作系统，win7+: win7及以上系统，winXP: winXP系统，win7-:非 win7+ 或 winXP，其他如 mac则返回 mac',
 26     *              version: '指定浏览器 且是 Windows系统 时方给放回该字段'
 27     *           }
 28     *
 29     */
 30    detectingBrowser () {
 31       var matchBS = rChrome.exec(uaInfo);
 32       var os = this.getDeviceOS();
 33       // 如果是指定浏览器，这则判断浏览器版本是否与系统版本相符
 34       if (matchBS != null) {
 35          var version = matchBS[2];
 36          var majorVersion = version.split('.')[0];
 37          // 如果是win7+系统且是61版本||winXP系统且是49版本
 38          if ((os === specifiedChrome.os && majorVersion === specifiedChrome.version) ||
 39             (os === winXPSpecifiedChrome.os && majorVersion === winXPSpecifiedChrome.version)) {
 40             return {
 41                os: os,
 42                version: version,
 43                browserCanUse: true,
 44                code: '2001'
 45             };
 46          } else {
 47             return {
 48                os: os,
 49                version: version,
 50                browserCanUse: false,
 51                code: '2002'
 52             };
 53          }
 54       } else {
 55          // 非Windows系统
 56          if (os.indexOf('win') === -1) {
 57             return {
 58                os: os,
 59                browserCanUse: false,
 60                code: '3002'
 61             };
 62          }
 63          // Windows系统但非指定浏览器
 64          return {
 65             os: os,
 66             browserCanUse: false,
 67             code: '3001'
 68          };
 69       }
 70    },
 71    /**
 72     * 获取当前操作系统及其版本
 73     * @return {*}
 74     */
 75    getDeviceOS () {
 76       var osName;
 77       // windows 系统
 78       if (uaInfo.indexOf('windows') != -1) {
 79          var winVer = Number(uaInfo.substr(uaInfo.indexOf('windows nt ') + 11, 4));
 80          // win7 及以上
 81          if (winVer > 6.1) {
 82             osName = 'win7+';
 83             // winXP
 84          } else if (winVer === 5.1) {
 85             osName = 'winXP';
 86          } else {
 87             osName = 'win7-';
 88          }
 89       } else if (uaInfo.indexOf('mac') != -1) {
 90          osName = 'mac';
 91       } else if (uaInfo.indexOf('linux') != -1) {
 92          osName = 'linux';
 93       } else if (uaInfo.indexOf('x11') != -1) {
 94          osName = 'unix';
 95       } else {
 96          osName = 'unknown';
 97       }
 98       return osName;
 99    },
100    /**
101     *  获取当前浏览器及其版本
102     *  主要是判断是否是chrome内核浏览器
103     * @return {*}
104     */
105    getBrowser () {
106       var match = null;
107       match = rMsie.exec(uaInfo);
108       if (match != null) {
109          return {
110             browser: 'IE',
111             version: match[2] || '0'
112          };
113       }
114       match = rFirefox.exec(uaInfo);
115       if (match != null) {
116          return {
117             browser: match[1] || '',
118             version: match[2] || '0'
119          };
120       }
121       match = rOpera.exec(uaInfo);
122       if (match != null) {
123          return {
124             browser: match[1] || '',
125             version: match[2] || '0'
126          };
127       }
128       match = rChrome.exec(uaInfo);
129       if (match != null) {
130          return {
131             browser: match[1] || '',
132             version: match[2] || '0'
133          };
134       }
135       match = rSafari.exec(uaInfo);
136       if (match != null) {
137          return {
138             browser: match[2] || '',
139             version: match[1] || '0'
140          };
141       }
142       // 如果获取不到浏览器信息
143       if (match != null) {
144          return {
145             browser: '',
146             version: '0'
147          };
148       }
149    }
150 };
151 window.browserDetection = browser;

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

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

 1 <script>
 2         (function () {
 3             /*
 4              * detectingBrowser()
 5              * 检测是否是科达浏览器
 6              * @return {
 7              *                 browserCanUse: '当前浏览器是否可用，Boolean 值',
 8              *                 code: '是科达浏览器时以2开头，2001:一切符合要求，2002:浏览器版本不符合要求；
 9              *                      不是科达浏览器时以3开头，3001:系统符合要求浏览器不符合要求，3002:系统不符合要求',
10              *                 os: '当前操作系统，win7+: win7及以上系统，winXP: winXP系统，win7-:非 win7+ 或 winXP，其他如 mac则返回 mac',
11              *                 version: '科达浏览器 且是 Windows系统 时方给放回该字段'
12              *             }
13              *
14              * getDeviceOS()
15              * 获取当前设备的操作系统
16              * @return String 操作系统名称 win7+: win7及以上版本系统，winXP: winXP系统，win7-: win7以下版本系统，
17              *                               mac: mac系统，linux: Linux系统，unix: Unix系统，other: 其他系统
18              *
19              * getBrowser()
20              * 获取当前浏览器内核版本
21              * @return {
22              *                 browser: '当前浏览器内核名称', // IE firefox opera chrome safari chrome-keda
23              *                 version: '当前浏览器内核版本号'
24              *             }
25              *
26              */
27             var browser = window.browserDetection.getBrowser();
28             var os = window.browserDetection.getDeviceOS();
29             var checkBS = window.browserDetection.detectingBrowser();
30             console.log('111--browser----', browser);
31             console.log('222--os----', os);
32             console.log('333--checkBS----', checkBS);
33             if (!checkBS.browserCanUse) {
34                 if (checkBS.code === '3002') {
35                     alert('当前设备的操作系统不是Windows系统，请更换！');
36                     return;
37                 }
38                 if (checkBS.code === '3001') {
39                     alert('当前浏览器不是指定的科达版本谷歌浏览器，请下载！');
40                     return;
41                 }
42                 if (checkBS.code === '2002') {
43                     alert('当前版本浏览器(' + checkBS.version + ')与当前设备的操作系统(' + checkBS.os + ')不匹配，请更换！');
44                 }
45             } else {
46                 alert('当前操作系统' + checkBS.os + '，当前浏览器版本' + checkBS.version);
47             }
48         })();
49     </script>

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

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