JavaScript 如何判断浏览器版本 - 详解

JavaScript 是一种广泛应用的编程语言，它可以在浏览器中执行脚本。然而，不同的浏览器解析 JavaScript 的能力是不一样的，因此在编写 JavaScript 脚本时，我们需要知道用户使用的浏览器类型和版本号。本文就来介绍 JavaScript 中如何判断浏览器的版本。

判断浏览器的类型

在测试 JavaScript 脚本时，我们需要知道用户使用的浏览器类型，以便针对不同浏览器的差异性对代码进行适配。以下代码可判断当前浏览器的类型：

let browser = {
versions: function () {
let u = navigator.userAgent;
return {
trident: u.indexOf('Trident') >-1, // IE 内核
presto: u.indexOf('Presto') >-1, // opera 内核
webKit: u.indexOf('AppleWebKit') >-1, // 苹果、谷歌内核
gecko: u.indexOf('Gecko') >-1 && u.indexOf('KHTML') == -1, // 火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), // 是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios 终端
android: u.indexOf('Android') >-1 || u.indexOf('Adr') >-1, // android 终端
iPhone: u.indexOf('iPhone') >-1, // 是否为 iPhone 或者 QQHD 浏览器
iPad: u.indexOf('iPad') >-1, // 是否 iPad 或者 QQHD 浏览器
webApp: u.indexOf('Safari') == -1 // 是否为 WEB 应用程序，没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

上述代码中，我们通过判断 userAgent 字符串中包含的关键字（如 Triden、Presto、AppleWebKit 等），来确定当前浏览器的类型。对于移动设备、iOS 和 Android 系统、iPhone、iPad 等等，都有相应的判断条件。

判断浏览器的版本号

知道了浏览器的类型之后，我们还需要知道浏览器的版本号，以便在代码中针对不同版本做出相应的处理。以下是判断当前浏览器版本的代码：

let browser = {
versions: function() {
let u = navigator.userAgent;
return {
trident: u.indexOf('Trident') >-1, // IE 内核
presto: u.indexOf('Presto') >-1, // opera 内核
webKit: u.indexOf('AppleWebKit') >-1, // 苹果、谷歌内核
gecko: u.indexOf('Gecko') >-1 && u.indexOf('KHTML') == -1, // 火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), // 是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios 终端
android: u.indexOf('Android') >-1 || u.indexOf('Adr') >-1, // android 终端
iPhone: u.indexOf('iPhone') >-1, // 是否为 iPhone 或者 QQHD 浏览器
iPad: u.indexOf('iPad') >-1, // 是否 iPad 或者 QQHD 浏览器
webApp: u.indexOf('Safari') == -1 // 是否为 WEB 应用程序，没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.trident) {
// IE 内核
let reIE = new RegExp('MSIE (\\d+\\.\\d+);');
reIE.test(u);
let fIEVersion = parseFloat(RegExp['$1']);
if (fIEVersion == 7) {
console.log('IE版本：IE7');
} else if (fIEVersion == 8) {
console.log('IE版本：IE8');
} else if (fIEVersion == 9) {
console.log('IE版本：IE9');
} else if (fIEVersion == 10) {
console.log('IE版本：IE10');
} else if (fIEVersion == 11) {
console.log('IE版本：IE11');
} else {
console.log('IE版本：未知');
}
}

我们在第一段代码中已经定义好了浏览器类型，这里只需要根据当前浏览器类型的判断条件，去实现相应的版本判断。以上代码实现了对 IE 浏览器不同版本号的判断，分别输出了版本号。

结论

通过以上代码的讲解，我们可以发现 JavaScript 中判断当前浏览器的类型和版本，具体步骤如下： 1. 定义一个对象（如上述代码中的 browser），其中包含一个 versions 方法和一个 language 属性； 2. 在 versions 方法中定义需要判断的关键词，并通过正则表达式进行判断； 3. 在代码适当的位置判断不同浏览器（或者不同版本号），并进行相应的处理。 掌握了以上这些知识，我们在编写 JavaScript 脚本时就可以根据不同浏览器（或者不同版本）之间的差异性，对代码进行针对性的优化。