浏览器版本 / 设备系统 检测
Posted s-qiu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器版本 / 设备系统 检测相关的知识，希望对你有一定的参考价值。
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>
以上是关于浏览器版本 / 设备系统 检测的主要内容，如果未能解决你的问题，请参考以下文章