本文介绍一种通用的JavaScript版本号范围判断方法,通过将版本号分割为数值数组并逐段比较,支持任意分段和长度。同时详细解析了基于对象特征检测和User-Agent字符串的浏览器类型识别技巧,包括IE、Chrome、Firefox等主流浏览器的判断逻辑及版本获取代码。
通用版本号范围判断方法
本文提供一种通用的JavaScript方法,用于判断指定版本号是否处于两个给定版本之间。该方法同样适用于判断版本号是否大于或小于某一特定值,只需对小于的情况取反即可实现。
注意:使用该方法前,必须确保参与比较的版本号遵循相同的规范格式,例如均使用点号(.)作为分隔符,且为固定位数的版本号结构。
var APP = {};
//判断指定版本是否在版本范围之间,需确保版本规范一致;比如 (..,..,..)
APP.betweenVersion = function(curr,start,end,separator){
if(curr == start || curr == end){
return true;
}
var separator = separator || '.';
var curr = curr.split(separator);
var start = start.split(separator);
var end = end.split(separator);
var gtStart = false;
var ltEnd = false;
gtStart = APP.gtTargetVersion( APP.compareVersionEle(curr,start) );
if(!gtStart){
return false;
}
return !APP.gtTargetVersion( APP.compareVersionEle(curr,end) );
};
APP.compareVersionEle = function(curr,target){
var len = curr.length;
var temp = [];
var left,right;
for(var i=;i<len;i++){
left = +curr[i];
right = +target[i];
if(left == right){
temp.push();
}else if(left > right){
temp.push();
}else{
temp.push(-);
}
}
return temp;
};
APP.gtTargetVersion = function(arr){
var res = true;
var curr,next;
for(var i=,len=arr.length;i<len;i++){
curr = arr[i];
next = arr[i+];
if( curr>next ){
if(curr == ){
res = false;
break;
}
if(curr == ){
res = true;
break;
}
}else if(curr == next){
if(curr == -){
res = false;
break;
}
if(curr == ){
res = true;
break;
}
}else{
if(curr == -){
res = false;
break;
}
if(curr == ){
res = true;
break;
}
}
}
// console.log(res);
return res;
}
var res = APP.betweenVersion('...','...','...','.');
console.log(res);
当前项目中存在判断指定版本是否位于两个版本区间内的需求。经百度和谷歌搜索发现,现有代码大多存在局限性,无法通用,甚至包含大量错误且互相转载的内容。
该方法的核心要点有两个:首先,需将分割后的版本号转换为数值型数组;其次,在比较大小时,将结果统一转换为 -1、0 或 1 三个数值进行对比。这样无论版本号间隔多大或分为几段,均可正确比对。
JavaScript浏览器类型与版本检测
接下来分享使用JavaScript检测浏览器类型和版本的具体代码实现。
对象/特征检测法
对象/特征检测法
这是一种判断浏览器能力(而非确切型号)的通用方法。大多数JavaScript专家推荐此方法,因为基于该方法编写的脚本更具前瞻性,经得起未来考验。
//获取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))); //截取版本号字符串,并转换为数值
}
alert(getIEVer()); //返回数值8(我的IE8)
如果更关注浏览器的实际能力而非其具体身份标识,推荐使用这种方法。
User-Agent字符串检测法
User-Agent字符串检测法
User-Agent字符串提供了关于Web浏览器的详细信息,包括浏览器名称和版本号。
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浏览器
};
(info.ie) && alert("IE浏览器");
(info.op) && alert("Opera浏览器");
(info.sa) && alert("Safari浏览器");
(info.ff) && alert("Firefox浏览器");
(info.ch) && alert("Chrome浏览器");
通常我们最常进行的操作是判断是否为IE浏览器,其他主流浏览器一般符合标准。若客户仅需兼容IE和Firefox,可采取以下做法:
var isIE = (navigator.appName == "Microsoft Internet Explorer");
判断IE的方法不止上述一种,还可利用IE特有的对象或属性,如window.ActiveXObject、document.all等,这属于对象/特征检测法的范畴。通常在不同浏览器上需编写不同样式(因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))); //截取版本号字符串,并转换为数值
}
alert(getIEVer()); //返回数值7
操作系统检测
检测操作系统:
var isWin = (navigator.userAgent.indexOf("Win") != -1); //如果是Windows系统,则返回true
var isMac = (navigator.userAgent.indexOf("Mac") != -1); //如果是Macintosh系统,则返回true
var isUnix = (navigator.userAgent.indexOf("X11") != -1); //如果是Unix系统,则返回true
var isLinux = (navigator.userAgent.indexOf("Linux") != -1); //如果是Linux系统,则返回true