你的位置:首页 > Java教程

[Java教程]如何检测现在主流的几大浏览器?


          在客户端中,浏览器最重要的检测对象是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);   }

    到此以上,所有的浏览器的检测均已完成。