瀏覽器版本 / 設備系統檢測

時間 2019-11-12

原文原文鏈接

browser-detection.js

  1 var uaInfo = window.navigator.userAgent.toLowerCase();
  2 var rMsie = /(msie\s|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來獲取html

<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>