JS检测浏览器类型和版本号（非常详细）

时间：03-07来源：作者：点击数：88

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