JavaScript 如何判斷瀏覽器版本 - 詳解

JavaScript 是一種廣泛應(yīng)用的編程語言，它可以在瀏覽器中執(zhí)行腳本。然而，不同的瀏覽器解析 JavaScript 的能力是不一樣的，因此在編寫 JavaScript 腳本時，我們需要知道用戶使用的瀏覽器類型和版本號。本文就來介紹 JavaScript 中如何判斷瀏覽器的版本。

判斷瀏覽器的類型

在測試 JavaScript 腳本時，我們需要知道用戶使用的瀏覽器類型，以便針對不同瀏覽器的差異性對代碼進(jìn)行適配。以下代碼可判斷當(dāng)前瀏覽器的類型：

let browser = {
versions: function () {
let u = navigator.userAgent;
return {
trident: u.indexOf('Trident') >-1, // IE 內(nèi)核
presto: u.indexOf('Presto') >-1, // opera 內(nèi)核
webKit: u.indexOf('AppleWebKit') >-1, // 蘋果、谷歌內(nèi)核
gecko: u.indexOf('Gecko') >-1 && u.indexOf('KHTML') == -1, // 火狐內(nèi)核
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 應(yīng)用程序，沒有頭部與底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

上述代碼中，我們通過判斷 userAgent 字符串中包含的關(guān)鍵字（如 Triden、Presto、AppleWebKit 等），來確定當(dāng)前瀏覽器的類型。對于移動設(shè)備、iOS 和 Android 系統(tǒng)、iPhone、iPad 等等，都有相應(yīng)的判斷條件。

判斷瀏覽器的版本號

知道了瀏覽器的類型之后，我們還需要知道瀏覽器的版本號，以便在代碼中針對不同版本做出相應(yīng)的處理。以下是判斷當(dāng)前瀏覽器版本的代碼：

let browser = {
versions: function() {
let u = navigator.userAgent;
return {
trident: u.indexOf('Trident') >-1, // IE 內(nèi)核
presto: u.indexOf('Presto') >-1, // opera 內(nèi)核
webKit: u.indexOf('AppleWebKit') >-1, // 蘋果、谷歌內(nèi)核
gecko: u.indexOf('Gecko') >-1 && u.indexOf('KHTML') == -1, // 火狐內(nèi)核
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 應(yīng)用程序，沒有頭部與底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.trident) {
// IE 內(nèi)核
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版本：未知');
}
}

我們在第一段代碼中已經(jīng)定義好了瀏覽器類型，這里只需要根據(jù)當(dāng)前瀏覽器類型的判斷條件，去實現(xiàn)相應(yīng)的版本判斷。以上代碼實現(xiàn)了對 IE 瀏覽器不同版本號的判斷，分別輸出了版本號。

結(jié)論

通過以上代碼的講解，我們可以發(fā)現(xiàn) JavaScript 中判斷當(dāng)前瀏覽器的類型和版本，具體步驟如下： 1. 定義一個對象（如上述代碼中的 browser），其中包含一個 versions 方法和一個 language 屬性； 2. 在 versions 方法中定義需要判斷的關(guān)鍵詞，并通過正則表達(dá)式進(jìn)行判斷； 3. 在代碼適當(dāng)?shù)奈恢门袛嗖煌瑸g覽器（或者不同版本號），并進(jìn)行相應(yīng)的處理。 掌握了以上這些知識，我們在編寫 JavaScript 腳本時就可以根據(jù)不同瀏覽器（或者不同版本）之間的差異性，對代碼進(jìn)行針對性的優(yōu)化。