如何检测现在主流的几大浏览器？
在客户端中，浏览器最重要的检测对象是navigator对象，包括检测浏览器的名称，版本号和平台等。
一：检测浏览器有哪些方式？
目前主要有两种方式：user-Agent字符串检测法和对象/特征检测法。
对象/特征检测法：主要是检测浏览器具有哪些能力，而不是特定的浏览器的版本号，名称。比如：判断浏览器是否支持DOM，则可以使用该检测方法。
if(document.getElementById)
{
alert("支持DOM")；
}
else
{
alert("不支持DOM");
}
注意：如果检查函数是否存在，不能加入括号，因为如果加入括号，浏览器就会尝试调用该函数，如果该函数不存在，则会出现错误。
比如下面的列子：
if(test)-----test为函数名
{
console.log("111");
}
else
{
console.log("222");
}
user-Agent字符串检测法：提供关于WEB浏览器的大量信息，包括版本号和名称等，应用比较广泛，像在网站流量统计，网站中访客使用的浏览器和操作系统等应用的比较多。
var suserAgent=navigator.userAgent; //我使用的是FIREFOX,输出为：Mozilla/5.0 (Windows NT 6.1; rv:46.0) Gecko/20100101 Firefox/46.0
var suserVersion=navigator.appVersion //输出为5.0
二：user-Agent（用户代理）的格式
navigator对象最早始于netScape Navigator 2.0和IE3.0；NetScape 引擎开发的代号为Mozilla.
IE和NetScape的格式
1.netScape Navigator 3.0
格式为：Mozilla/AppVersion(platform,Secrity[;os-or-cpu-description])
比如win95在netScape Navigator 3.0 上运行后为：Mozilla/3.0（win95;I）
I表示安全性较低，N表示没有安全性，U表示强128位加密安全性。
2.IE3.0
格式为：Mozilla/2.0(compatible,MSIE [IEversion];os)--compatible表示兼容的。
IE是3.0,而后面Mozilla/2.0有坑，造成user-Agent混淆
比如win95在IE3.02运行后为：Mozilla/2.0（compatible;MSIE 3.0;windows 95）
//因此混淆带来的影响是：检测浏览器IE3.0和操作系统的算法变得更加繁琐。
检测IE变为：
if(navigator.userAgent.indexOf('MSIE ')>-1)
{
//检测为3.0或更高版本
if(navigator.userAgent.indexOf('3.')>-1){alert("检测IE3.0版本浏览器")}
}
else if(parseFloat(navigator.appVersion)>=3)
{
alert("检测非IE3.0版本的浏览器")
}
//如果没有混淆，只用一个算法，便能检测3.0版本的浏览器
if(parseFloat(navigator.appVersion)>=3)
{
alert("检测到所有为3.0版本的浏览器")
}
因此如果Mozilla和IE的版本不对应，都要单独检测IE。其它的这里都不再讲述了，大家知道就行。
3：现在基本两者都保持一致。
格式为：Mozilla/MozillaVersion(platform,security,os-or-cpu;localization information;prereleaseVersion) Gecko/Geckoversion ApplicationProduct/ApplicationProductVersion
下面一一解释各个的含义：
MozillaVersion--MozillaVersion的版本
platform-----------操作系统类型，包括WINdows,Mac,Unix
security-----------可为I N U
os-or-cpu---------windows系统下：winNT/win95 ;Mac系统下：代表cpu类型，为68k/ppc ;Unix系统下：从uname-sm中获得
localization information-------浏览器使用的语言，典型的为美国的en-US
prereleaseVersion--------用于这个浏览器的开放源代码的Mozilla代码的基础版本。
Geckoversion ----使用Gecko渲染引擎的版本，这里按照yyyymmdd的日期
ApplicationProduct---------使用Mozilla代码的品牌浏览器的名称。
ApplicationProductVersion-----使用Mozilla代码的品牌浏览器的名称的版本。
比如：Mozilla/5.0 (Windows ；u;Windows NT 6.1; en-US;rv:46.0) Gecko/20100101 Firefox/46.0
Opera的格式
格式：Opera/AppVersion(os,security)[language]
比如：Opera/7.54(windows NT 5.1,u)[en]
Opera用一个独特的user-Agent来表示确定它的web浏览器,但正是因为它的独特性，它可以伪装成IE和Mozilla的某种版本。
因此这就造成了需要针对出现的不同版本，判断属于何种浏览器。
1.当opera伪装成Mozilla 5.0时，返回的user-Agent为：
Mozilla/5.0 （windows NT 5.1;U）opera 7.54
2.当opera伪装成IE6.0时，返回的user-Agent为：
Mozilla/4.0 （compatible;MSIE 6.0;windows NT 5.1）opera 7.54---出现了compatible，MSIE 相当于opera模拟了IE的字符串
Safari的格式
safari是apple自己推出的浏览器，基于Khtml的开源项目。
格式：Mozilla/5.0(platform,security,os-or-cpu;language) Applewebkit/ApplewebkitVersion(kHTML,like Gecko )safari/safariVersion
比如：Mozilla/5.0(MAC,U,PPC MAC os x;en) Applewebkit/124(kHTML,like Gecko )safari/125.1
---safari和Mozilla是兼容的
三：由于浏览器，对应升级着不同的版本，因此最好的检测方法就是检测最小版本。
比如：
if(isIE5||isIE6||isIE7||isIE8)
{
//要做的事
}
//只需要直接检测最小版本的即可
if(isMinIE5)
{
//要做的事
}
四：如何检测Opera?
首先我们封装一个函数，一会后面要用到。主要是比较版本的值。
var suerAgent=navigator.userAgent;//保存user-Agent信息
var fAppVersion=navigator.appVersion; //保存版本号
function compareVersion(sVersion1,sVersion2)
{
//将版本拆分
var aVersion1=sVersion1.split('.');
var aVersion2=sVersion2.split('.');
//如果版本长度不一致，则在较短的版本后面补0
if(aVersion1.length>aVersion2.length)
{
for(var i=0;i<aVersion1.length-aVersion2.length;i++)
{
aVersion2.push('0');
}
}
else if(aVersion1.length<aVersion2.length)
{
for(var i=0;i<aVersion1.length-aVersion2.length;i++)
{
aVersion1.push('0');
}
}
//现在两个不同版本的位数相等，比较版本各个位数的大小。
for(var i=0;i<aVersion1.length;i++)
{
var var1=parseInt(aVersion1[i],10);
var var2=parseInt(aVersion2[i],10);
if(var1<var2){return -1;}//前者小于后者
else if(var1>var2){return 1;}//前者大于后者
}
return 0;//两者相等
}
console.log(compareVersion("1.3.4","2.3"));
console.log(compareVersion("1.13.2","1.3"));
console.log(compareVersion("3.4","3.4"));
1.首先我们分析一下，opera的user-Agent中每一个都含有opera，因此最简单的方法就是检查是否含有字符opera。
var isOpera=suerAgent.indexOf("Opera")>-1;（得到的为bool值）
2.由于opera含有不同的版本，这里可以声明几个变量，用来测试不同版本的opera
var isMinOpera4=isMinOpera5=isMinOpera6=isMinOpera7=false //每个变量都设为false，保证如果浏览器为非Opera时，能正确返回false
3.由于opera有伪装，所以有两种方法来确定浏览器的版本。
如果为自身的user-Agent:
if(isOpera)
{
var selfOperaVersion=null;
if(navigator.appName=="Opera")
{
selfOperaVersion=fAppVersion;(fAppVersion为保存的版本号)
}
}
如果使用了伪装的user-Agent:
//下面我们来看一下，应该如何抽取？
var popOperaVersion=new RegExp("opera(\\d+\\.\\d+)");//注意这里用的是new RegExp()的方法，需要对\d和\.进行双重转义。
所以综上两种情况，我们将代码整理下如下：
if(isOpera)
{
var selfOperaVersion=null;
if(navigator.appName=="Opera")
{
selfOperaVersion=fAppVersion;(fAppVersion为保存的版本号)
}
else
{
var popOperaVersion=new RegExp("opera(\\d+\\.\\d+)");
popOperaVersion.test(suerAgent);
selfOperaVersion=parseFloat(RegExp["$1"]);//版本号存储在RegExp["$1"]中
}
//检测一下分别是什么版本的opera
console.log((isMinOpera4=selfOperaVersion)>=4);
console.log((isMinOpera5=selfOperaVersion)>=5);
}
五：如何检测safari?
首先了解到Konqueror和safari都是基于KHTML，那么我们查看一下它的user-Agent字符：
Mozilla/5.0(compatible;konqueror/2.2.2;sunos)
Mozilla/5.0(compatible;konqueror/3.2;freeBSD)(KHTML,like Gecko)
Mozilla/5.0(Mac;u;ppc mac os x;en)Applewebkit/51(like Gecko) safari/51
暂列出上面三种典型的user-Agent,那么可以分析到safari中需要查找konqueror，Applewebkit，KHTML中的字符
检测代码如下,这里不再详细讲述，同opera的类似：
var isKHTML = suerAgent.indexOf("KHTML")>-1||suerAgent.indexOf("konqueror")>-1||suerAgent.indexOf("Applewebkit")>-1;
var isMinSafari1=isMinSafari2=false;
var isKonq2_2=isKonq3=isKonq3_1=isKonq3_2=false;
if(isKHTML)
{
//判断使用的是何种KHTML？只有两种，一种是safari，一种是konqueror
isSafari=suerAgent.indexOf('Applewebkit')>-1;
isKonq=suerAgent.indexOf('Applewebkit')>-1;
if(isSafari)
{
//设置正则表达式
var popAppWebkit=new RegExp("Applewebkit\\/(\\d+(?:\\.\\d*)?)");//版本可以有小数，但不全是
popAppWebkit.test(suerAgent);
var selfAPPVersion=parseFloat(RegExp["$1"]);
console.log((isMinSafari1=selfAPPVersion)>=85);
console.log((isMinSafari1=selfAPPVersion)>=124);
}
else if(isKonq)
{
//设置正则表达式
var popAppWebkit=new RegExp("konqueror\\/(\\d+(?:\\.\\d+(?:\\.\\d)?)?)");
popAppWebkit.test(suerAgent);
console.log((isKonq2_2=compareVersion(RegExp["$1"],"2.2"))>=0);
console.log((isKonq3=compareVersion(RegExp["$1"],"3.0"))>=0);
console.log((isKonq3_1=compareVersion(RegExp["$1"],"3.1"))>=0);
console.log((isKonq3_2=compareVersion(RegExp["$1"],"3.2"))>=0);
}
}
六：如何检测IE？
先看一下IE的user-Agent的格式：Mozilla/4.0(compatible;MSIE 6.0;windows NT)
那么主要检测compatible和MSIE 这两个字符即可。
代码如下：
var isIE=suserAgent.indexOf("compatible")>-1&&suserAgent.indexOf("MSIE ")>-1&&!isOpera;
var isMinIE4=isMinIE5=isMinIE5_5=isMinIE6=false;
if(isIE)
{
var reIE=new RegExp("MSIE(\\d+\\.\\d+)");
reIE.test(suerAgent);
var selfAPPVersion=parseInt(RegExp["$1"]);
console.log((isMinIE4=selfAPPVersion)>=4);
console.log((isMinIE5=selfAPPVersion)>=4);
console.log((isMinIE5_5=selfAPPVersion)>=4);
}
七：如何检测Mozilla?
先来看下格式：Mozilla/5.0 (Windows NT 6.1; rv:46.0) Gecko/20100101 Firefox/46.0，注意要考虑opera的伪装以及Safari中出现的like Gecko。
代码如下：
var isMozilla=suerAgent.indexOf("Gecko")>-1&&!isKHTML;
var isMinMoz1=isMinMoz1_4=isMinMoz1_5=false;
if(isMozilla)
{
var reMozilla=new RegExp("rv:(\\d+\\.\\d+(?:\\.\\d+)?)");
reMozilla.test(suerAgent);
var selfAPPVersion=parseFloat(RegExp["$1"]);
console.log((isMinMoz1=compareVersion(RegExp["$1"]),"1.0")>=0);
console.log((isMinMoz1_4=compareVersion(RegExp["$1"]),"1.4")>=0);
console.log((isMinMoz1_5=compareVersion(RegExp["$1"]),"1.5")>=0);
}
到此以上，所有的浏览器的检测均已完成。
