JS檢測瀏覽器型別和版本號（非常詳細）

navigator 物件儲存了與瀏覽器相關的基本資訊，如名稱、版本和系統等。通過 window.navigator 可以參照該物件，並利用它的屬性來讀取用戶端基本資訊。

如何檢測瀏覽器

檢測瀏覽器型別的方法有多種，常用的方法包括兩種：特徵檢測法和字串檢測法。這兩種方法都存在各自的優點和缺點，使用者可以根據需要進行選擇。

1) 特徵檢測法

特徵檢測法就是根據瀏覽器是否支援特定的功能來決定相應操作的方式。這是一種非精確判斷法，但卻是最安全的檢測方法。因為準確檢測瀏覽器的型別和型號是一件很困難的事情，而且很容易存在誤差。如果不關心瀏覽器的身份，僅僅在意瀏覽器的執行能力，那麼使用特徵檢測法就完全可以滿足需要。

【範例1】下面程式碼檢測當前瀏覽器是否支援 document.getElementsByName 特性，如果支援就使用該方法獲取文件中的 a 元素；否則，再檢測是否支援 document.getElementsByTagName 特性，如果支援就使用該方法獲取文件中的 a 元素。

if (document.getElementsByName) {  //如果存在，則使用該方法獲取a元素
    var a = document.getElementsByName ("a");
} else if (document.getElementsByTagName) {  //如果存在，則使用該方法獲取a元素
    var a = document.getElementsByTagName ("a");
}

當使用一個物件、方法或屬性時，先判斷它是否存在。如果存在，則說明瀏覽器支援該物件、方法或屬性，那麼就可以放心使用。

2) 字串檢測法

用戶端瀏覽器每次傳送 HTTP 請求時，都會附帶有一個 user-agent（使用者代理）字串，對於 Web 開發人員來說，可以使用使用者代理字串檢測瀏覽器型別。

【範例2】BOM 在 navigator 物件中定義了 userAgent 屬性，利用該屬性可以捕獲用戶端 user-agent 字串資訊。

var s = window.navigator.userAgent;
  //簡寫方法
var s = navigator.userAgent;
console.log(s);
//返回類似資訊：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36

user-agent 字串包含了 Web 瀏覽器的大量資訊，如瀏覽器的名稱和版本。

對於不同的瀏覽器來說，該字串包含的資訊也不盡相同。隨著瀏覽器版本的不斷升級，返回的 user-agent 字串格式和資訊也會不斷變化。

檢測瀏覽器型別和版本號

檢測瀏覽器型別和版本就比較容易了，使用者只需要根據不同瀏覽器型別匹配特殊資訊即可。

範例1

下面方法能夠檢測當前主流瀏覽器型別，包括 IE、Opera、Safari、Chrome 和 Firefox 瀏覽器。

var ua = navigator.userAgent.toLowerCase();  //獲取使用者端資訊
var info = {
    ie : /msie/ .test(ua) && !/opera/ .test(ua),  //匹配IE瀏覽器
    op : /opera/ .test(ua),  //匹配Opera瀏覽器
    sa : /version.*safari/.test(ua),  //匹配Safari瀏覽器
    ch : /chrome/.test(ua),  //匹配Chrome瀏覽器
    ff : /gecko/.test(ua) && !/webkit/.test(ua)  //匹配Firefox瀏覽器
};

在指令碼中呼叫該物件的屬性，如果為 true，說明為對應型別瀏覽器，否則就返回 false。

(info.ie) && console.log("IE瀏覽器");
(info.ie) && console.log("Opera瀏覽器");
(info.ie) && console.log("Safari瀏覽器");
(info.ie) && console.log("Chrome瀏覽器");
(info.ie) && console.log("Firefox瀏覽器");

範例2

通過解析 navigator 物件的 userAgent 屬性，可以獲得瀏覽器的完整版本號。針對 IE 瀏覽器來說，它是在“MSIE”字串後面帶一個空格，然後跟隨版本號及分號。因此，可以設計以下的函數獲取 IE 的版本號。

//獲取IE瀏覽器的版本號
//返回數值，顯示IE的主版本號
function getIEVer () {
    var ua = navigator.userAgent;  //獲取使用者端資訊
    var b = ua.indexOf("MSIE");  //檢測特殊字串“MSIE”的位置
    if (b < 0) {
        return 0;
    }
    return parseFloat (ua.substring (b + 5,ua.indexOf (";", b)));  //擷取版本號，並轉換為數值
}

直接呼叫該函數即可獲取當前 IE 瀏覽器的版本號。

console.log(getIEVer());

IE 瀏覽器版本眾多，一般可以使用大於某個數位的形式進行範圍匹配，因為瀏覽器是向後相容的，檢測是否等於某個版本顯然不能使用新版本的需要。

範例3

利用同樣的方法可以檢測其他型別瀏覽器的版本號，下面函數是檢測 Firefox 瀏覽器的版本號。

function getFFVer () {
    var ua = navigator.userAgent;
    var b = ua.indexOf("Firefox/");
    if (b < 0) {
        return 0;
    }
    return parseFloat (ua.substring (b + 8, ua.lastIndexOf(".")));
}
console.log(getFFVer());  //返回類似數值：64

對於 Opera 等瀏覽器，可以使用 navigator.userAgent 屬性來獲取版本號，只不過其使用者端資訊與 IE 有所不同，如 Opera/9.02(Windows NT 5.1; U; en)，根據這些格式可以獲取其版本號。

如果瀏覽器的某些物件或屬性不能向後相容，這種檢測方法也容易產生問題。所以更穩妥的方法是採用特徵檢測法，而不要使用字串檢測法。