JavaScript判断浏览器类型及版本

### JavaScript 判断浏览器类型及版本的方法 在网页开发过程中，有时候我们需要根据用户的浏览器类型和版本来执行特定的代码逻辑或调整界面布局。这是因为不同的浏览器在处理某些特性时可能存在差异，例如对新标准的支持程度、渲染引擎的行为等。通过JavaScript判断浏览器类型及版本，可以帮助开发者更好地进行兼容性处理。 #### 判断方法 ### 1. 利用 `navigator.userAgent` `navigator.userAgent` 是一个返回浏览器发送给服务器的用户代理字符串的属性。不同的浏览器在该字符串中会有特定的标识符，通过这些标识符可以识别出浏览器类型和版本。下面是一些常见浏览器的识别方式： - **IE（Internet Explorer）**： - 通过检查是否支持 `ActiveXObject` 来判断。 - 使用正则表达式匹配 `navigator.userAgent` 中的 `"MSIE"` 字符串来获取版本号。 - 示例版本： - `Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)` - `Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)` - `Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)` - `Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)` - **Firefox**： - 通过 `document.getBoxObjectFor` 方法的存在来判断。 - 使用正则表达式匹配 `navigator.userAgent` 中的 `"Firefox"` 字符串来获取版本号。 - 示例版本： - `Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1` - `Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3` - `Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12` - **Opera**： - 通过 `window.opera` 的存在来判断。 - 使用正则表达式匹配 `navigator.userAgent` 中的 `"Opera"` 字符串来获取版本号。 - 示例版本： - `Opera/9.27 (Windows NT 5.2; U; zh-cn)` - `Opera/8.0 (Macintosh; PPC Mac OS X; U; en)` - `Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0` - **Safari**： - 通过检测 `navigator.userAgent` 中是否存在 `Safari` 或者 `AppleWebKit` 来判断。 - 使用正则表达式匹配 `navigator.userAgent` 中的 `"Safari"` 或 `"AppleWebKit"` 字符串来获取版本号。 - 示例版本： - `Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13` - `Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3` - **Chrome**： - 通过检测 `navigator.userAgent` 中是否存在 `Chrome` 和 `AppleWebKit` 来判断。 - 使用正则表达式匹配 `navigator.userAgent` 中的 `"Chrome"` 字符串来获取版本号。 - 示例版本： - `Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13` ### 2. 编写示例脚本 接下来，我们编写一个简单的脚本来实现上述功能，通过一个 `Sys` 对象来存储浏览器的信息： ```javascript // 定义 Sys 对象来保存浏览器信息 var Sys = {}; // 获取 navigator.userAgent 并转换为小写 var ua = navigator.userAgent.toLowerCase(); // 判断是否为 IE if (window.ActiveXObject) { // 获取 IE 版本 Sys.ie = ua.match(/msie([\d.]+)/)[1]; } else if (document.getBoxObjectFor) { // 判断是否为 Firefox Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]; } else if (window.MessageEvent && !document.getBoxObjectFor) { // 判断是否为 Chrome Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]; } else if (window.opera) { // 判断是否为 Opera Sys.opera = ua.match(/opera.([\d.]+)/)[1]; } // 输出结果 console.log(Sys); ``` ### 结论 以上方法通过分析 `navigator.userAgent` 和浏览器特定的API来识别浏览器类型及版本。需要注意的是，`navigator.userAgent` 可能会被修改或者伪装，因此这种方法并不是百分之百准确。然而，在大多数情况下，它足以满足基本的需求。此外，随着浏览器技术的发展，一些新的特性和API也会出现，开发者应该持续关注并更新自己的判断逻辑。