浏览器的判断

一、IE的语句判断 IE浏览器中的条件判断使用(if ie endif) <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]--> <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]--> <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]--> <!--[if IE 6]> 仅IE6可识别 <![endif]--> <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--> <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--> <!--[if IE 7]> 仅IE7可识别 <![endif]--> <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--> <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]--> <!--[if IE 8]> 仅IE8可识别 <![endif]--> <!--[if lt IE 8]> IE8以及IE8以下版本可识别 <![endif]--> <!--[if gte IE 8]> IE8以及IE8以上版本可识别 <![endif]--> <!--[if IE 9]> 仅IE9可识别 <![endif]--> <!--[if lt IE 9]> IE9以及IE9以下版本可识别 <![endif]--> <!--[if gte IE 9]> IE9以及IE9以上版本可识别 <![endif]-->   二、各种JS判断代码 1、推荐用下面的代码来判断
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <script type="text/javascript">
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var s;
        (s = ua.match(/msie ([d.]+)/)) ? Sys.ie = s[1] :
        (s = ua.match(/firefox/([d.]+)/)) ? Sys.firefox = s[1] :
        (s = ua.match(/chrome/([d.]+)/)) ? Sys.chrome = s[1] :
        (s = ua.match(/opera.([d.]+)/)) ? Sys.opera = s[1] :
        (s = ua.match(/version/([d.]+).*safari/)) ? Sys.safari = s[1] : 0;
 
        //以下进行测试
//      if (Sys.ie) document.write('IE: ' + Sys.ie);
        if(Sys.ie){
            if(Sys.ie==5.5){
                document.write('IE: ' + Sys.ie);
            }
            if(Sys.ie==6.0){
                document.write('IE: ' + Sys.ie);
            }
            if(Sys.ie==7.0){
                document.write('IE: ' + Sys.ie);
            }
            if(Sys.ie==8.0){
                document.write('IE: ' + Sys.ie);
            }
            if(Sys.ie==9.0){
                document.write('IE: ' + Sys.ie);
            }
        }
        if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
 
        if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
 
        if (Sys.opera) document.write('Opera: ' + Sys.opera);
 
        if (Sys.safari) document.write('Safari: ' + Sys.safari);
 
    </script>
</body>
</html>
2、另外一种代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
 
<script type="text/javascript">
    function isIE(){
        return navigator.appName.indexOf("Microsoft Internet Explorer")!=-1 && document.all;
    }
    function isIE6() {
        return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 6.0")=="-1"?false:true;
    }
    function isIE7(){
        return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 7.0")=="-1"?false:true;
    }
    function isIE8(){
        return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 8.0")=="-1"?false:true;
    }
    function isNN(){
       return navigator.userAgent.indexOf("Netscape")!=-1;
    }
    function isOpera(){
        return navigator.appName.indexOf("Opera")!=-1;
    }
    function isFF(){
        return navigator.userAgent.indexOf("Firefox")!=-1;
    }
    function isChrome(){
        return navigator.userAgent.indexOf("Chrome") > -1;
    }
 
    function showResult(){
        if(isChrome()){
            alert("这是谷歌浏览器");
        }
 
        if(isIE()){
            alert("这是IE");
        }
 
        if(isIE6()){
            alert("这是isIE6");
        }
 
        if(isIE7()){
            alert("这是isIE7");
        }
 
        if(isIE8()){
            alert("这是IisIE8");
        }
 
        if(isNN()){
            alert("这是isNN");
        }
 
        if(isOpera()){
            alert("这是isOpera");
        }
 
        if(isFF()){
            alert("这是isFF");
        }
    }
</script>
 
</head>
 
<body onload="showResult()">
</body>
</html>
三、判断浏览器的详细说明 在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,Chrome的出世不知道又要给我们添多少乱子。浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准 确判断出浏览器的类型及其版本。 JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法,一种是根 据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断的。在许多情况下,值判断出浏览器类型之后,还需判断浏览器版本才能处理兼容性问题,而判断浏览器的 版本一般只能通过分析浏览器的userAgent才能知道。我们先来分析一下各种浏览器的特征及其userAgent。 IE 只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是ActiveXObject函数。只要判断window对象存在 ActiveXObject函数,就可以明确判断出当前浏览器是IE。而 IE各个版本典型的userAgent如下: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0) Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Mozilla/4.0 (compatible; MSIE 5.0; Windows NT) 其中,版本号是MSIE之后的数字。 Firefox Firefox中的DOM元素都有一个getBoxObjectFor函数,用来获取该DOM元素的位置和大小(IE对应的中是 getBoundingClientRect函数)。这是Firefox独有的,判断它即可知道是当前 浏览器是Firefox。Firefox几个版本的 userAgent大致如下: Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1 Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3 Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12 其中,版本号是Firefox之后的数字。 Opera Opera提供了专门的浏览器标志,就是window.opera属性。Opera典型的userAgent如下: Opera/9.27 (Windows NT 5.2; U; zh-cn) Opera/8.0 (Macintosh; PPC Mac OS X; U; en) Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0 其中,版本号是靠近Opera的数字。 Safari Safari浏览器中有一个其他浏览器没有的openDatabase函数,可做为判断Safari的标志。Safari典型的userAgent如下: Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13 Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3 其版本号是Version之后的数字。 Chrome Chrome有一个MessageEvent函数,但Firefox也有。不过,好在Chrome并没有Firefox的getBoxObjectFor 函数,根据这个条件还是可以准确判断出Chrome浏览器的。目前,Chrome的 userAgent是: Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13 其中,版本号在Chrome只后的数字。 有趣的是,Chrome的userAgent还包含了Safari的特征,也许这就是Chrome可以运行所有Apple浏览器应用的基础吧。 只要了解了以上信息,我们就可以根基这些特征来判断浏览器类型及其版本了。我们会将判断的结果保存在Sys名字空间中,成为前端框架的基本标志信息,供今后的程序来读取。如果 判断出谋种浏览器,Sys名字空间将有一个该浏览器名称的属性,其值为该浏览器的版本号。例如,如果判断出IE 7.0,则Sys.ie的值为7.0;如果判断出Firefox 3.0,则Sys.firefox的值为 3.0。下面是判断浏览器的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script type="text/javascript">
 
        var Sys = {};
 
        var ua = navigator.userAgent.toLowerCase();
 
        if (window.ActiveXObject)
 
            Sys.ie = ua.match(/msie ([d.]+)/)[1]
 
        else if (document.getBoxObjectFor)
 
            Sys.firefox = ua.match(/firefox/([d.]+)/)[1]
 
        else if (window.MessageEvent && !document.getBoxObjectFor)
 
            Sys.chrome = ua.match(/chrome/([d.]+)/)[1]
 
        else if (window.opera)
 
            Sys.opera = ua.match(/opera.([d.]+)/)[1]
 
        else if (window.openDatabase)
 
            Sys.safari = ua.match(/version/([d.]+)/)[1];
 
        //以下进行测试
 
        if(Sys.ie) document.write('IE: '+Sys.ie);
 
        if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
 
        if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
 
        if(Sys.opera) document.write('Opera: '+Sys.opera);
 
        if(Sys.safari) document.write('Safari: '+Sys.safari);
 
    </script>
我们把对IE的判断放在第一,因为IE的用户最多,其次是判断Firefox。按使用者多少的顺序来判断浏览器类型,可以提高判断效率,少做无用功。之所以将Chrome放在第三判断,是因 为我们预测Chrome很快会成为市场占有率第三的浏览器。其中,在分析浏览器版本时,用到了正则表达式来析取其中的版本信息。 如果你的JavaScript玩得很高,你还可以将前面的判断代码写成这样:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript">
 
       var Sys = {};
 
       var ua = navigator.userAgent.toLowerCase();
 
       window.ActiveXObject ? Sys.ie = ua.match(/msie ([d.]+)/)[1] :
 
       document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox/([d.]+)/)[1] :
 
       window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome/([d.]+)/)[1] :
 
       window.opera ? Sys.opera = ua.match(/opera.([d.]+)/)[1] :
 
       window.openDatabase ? Sys.safari = ua.match(/version/([d.]+)/)[1] : 0;
 
       //以下进行测试
 
       if(Sys.ie) document.write('IE: '+Sys.ie);
 
       if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
 
       if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
 
       if(Sys.opera) document.write('Opera: '+Sys.opera);
 
       if(Sys.safari) document.write('Safari: '+Sys.safari);
 
   </script>
这样可以使JavaScript代码更精简些。当然,可读性稍差一些,就看你是重视效率还是重视可维护性了。 使用不同特征来判断浏览器的方法,虽然在速度上比用正则表达式分析userAgent要来的快,不过这些特征可能会随浏览器版本而变化。比如,一种浏览器本来独有的特性取得了市场上 的成功,其他浏览器也就可能跟着加入该特性,从而使该浏览器的独有特征消失,导致我们的判断失败。因此,相对比较保险的做法是通过解析userAgent中的特征来判断浏览器类型。何况, 反正判断版本信息也需要解析浏览器的userAgent的。 通过分析各类浏览器的userAgent信息,不难得出分辨各类浏览器及其版本的正则表达式。而且,对浏览器类型的判断和版本的判断完全可以合为一体地进行。于是,我们可以写出下面的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <script type="text/javascript">
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var s;
        (s = ua.match(/msie ([d.]+)/)) ? Sys.ie = s[1] :
        (s = ua.match(/firefox/([d.]+)/)) ? Sys.firefox = s[1] :
        (s = ua.match(/chrome/([d.]+)/)) ? Sys.chrome = s[1] :
        (s = ua.match(/opera.([d.]+)/)) ? Sys.opera = s[1] :
        (s = ua.match(/version/([d.]+).*safari/)) ? Sys.safari = s[1] : 0;
 
        //以下进行测试
//        if (Sys.ie) document.write('IE: ' + Sys.ie);
        if(Sys.ie){
            if(Sys.ie==5.5){
                document.write('IE: ' + Sys.ie);
            }
            if(Sys.ie==6.0){
                document.write('IE: ' + Sys.ie);
            }
            if(Sys.ie==7.0){
                document.write('IE: ' + Sys.ie);
            }
            if(Sys.ie==8.0){
                document.write('IE: ' + Sys.ie);
            }
            if(Sys.ie==9.0){
                document.write('IE: ' + Sys.ie);
            }
        }
        if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
 
        if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
 
        if (Sys.opera) document.write('Opera: ' + Sys.opera);
 
        if (Sys.safari) document.write('Safari: ' + Sys.safari);
 
    </script>
</body>
</html>
其中,采用了“... ? ... : ...”这样的判断表达式来精简代码。判断条件是一条赋值语句,既完成正则表达式的匹配及结果复制,又直接作为条件判断。而随后的版本信息只需从前 面的匹配结果中提取即可,这是非常高效的代码。 以上的代码都是为了打造前端框架所做的预研,并在五大浏览器上测试通过。今后,判断某种浏览器只需用if(Sys.ie)或 if(Sys.firefox)等形式,而判断浏览器版本只需用if (Sys.ie == '8.0')或if(Sys.firefox == '3.0')等形式,表达起来还是非常优雅的。 方法二:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function browserinfo(){
        var Browser_Name=navigator.appName;
        var Browser_Version=parseFloat(navigator.appVersion);
        var Browser_Agent=navigator.userAgent;
        var Actual_Version,Actual_Name;
        var is_IE=(Browser_Name=="Microsoft Internet Explorer");//判读是否为ie浏览器
        var is_NN=(Browser_Name=="Netscape");//判断是否为netscape浏览器
var is_op=(Browser_Name=="Opera");//判断是否为Opera浏览器
                if(is_NN){
            //upper 5.0 need to be process,lower 5.0 return directly
            if(Browser_Version>=5.0){
   if(Browser_Agent.indexOf("Netscape")!=-1){
        var Split_Sign=Browser_Agent.lastIndexOf("/");
                 var Version=Browser_Agent.lastIndexOf(" ");
     var Bname=Browser_Agent.substring(0,Split_Sign);
     var Split_sign2=Bname.lastIndexOf(" ");
                 Actual_Version=Browser_Agent.substring(Split_Sign+1,Browser_Agent.length);
                 Actual_Name=Bname.substring(Split_sign2+1,Bname.length);
 
   }
   if(Browser_Agent.indexOf("Firefox")!=-1){
        var Split_Sign=Browser_Agent.lastIndexOf("/");
                 var Version=Browser_Agent.lastIndexOf(" ");
                 Actual_Version=Browser_Agent.substring(Split_Sign+1,Browser_Agent.length);
                 Actual_Name=Browser_Agent.substring(Version+1,Split_Sign);
 
   }
   if(Browser_Agent.indexOf("Safari")!=-1){
   if(Browser_Agent.indexOf("Chrome")!=-1){
   var Split_Sign=Browser_Agent.lastIndexOf(" ");
                var Version=Browser_Agent.substring(0,Split_Sign);;
             var Split_Sign2=Version.lastIndexOf("/");
                var Bname=Version.lastIndexOf(" ");
                 Actual_Version=Version.substring(Split_Sign2+1,Version.length);
                 Actual_Name=Version.substring(Bname+1,Split_Sign2);
   }
   else{
       var Split_Sign=Browser_Agent.lastIndexOf("/");
                var Version=Browser_Agent.substring(0,Split_Sign);;
             var Split_Sign2=Version.lastIndexOf("/");
                var Bname=Browser_Agent.lastIndexOf(" ");
                 Actual_Version=Browser_Agent.substring(Split_Sign2+1,Bname);
                 Actual_Name=Browser_Agent.substring(Bname+1,Split_Sign);
 
   }
   }
 
             }
            else{
                 Actual_Version=Browser_Version;
                 Actual_Name=Browser_Name;
             }
         }
        else if(is_IE){
            var Version_Start=Browser_Agent.indexOf("MSIE");
            var Version_End=Browser_Agent.indexOf(";",Version_Start);
             Actual_Version=Browser_Agent.substring(Version_Start+5,Version_End)
             Actual_Name=Browser_Name;
 
            if(Browser_Agent.indexOf("Maxthon")!=-1||Browser_Agent.indexOf("MAXTHON")!=-1){
   var mv=Browser_Agent.lastIndexOf(" ");
   var mv1=Browser_Agent.substring(mv,Browser_Agent.length-1);
            mv1="遨游版本:"+mv1;
        Actual_Name+="(Maxthon)";
     Actual_Version+=mv1;
             }
 
         }
   else if(Browser_Agent.indexOf("Opera")!=-1){
                 Actual_Name="Opera";
                var tempstart=Browser_Agent.indexOf("Opera");
                var tempend=Browser_Agent.length;
                 Actual_Version=Browser_Version;
             }
        else{
             Actual_Name="Unknown Navigator"
             Actual_Version="Unknown Version"
         }
        /*------------------------------------------------------------------------------
         --Your Can Create new properties of navigator(Acutal_Name and Actual_Version) --
         --Userage:                                                                     --
         --1,Call This Function.                                                        --
         --2,use the property Like This:navigator.Actual_Name/navigator.Actual_Version;--
         ------------------------------------------------------------------------------*/
         navigator.Actual_Name=Actual_Name;
         navigator.Actual_Version=Actual_Version;
 
        /*---------------------------------------------------------------------------
         --Or Made this a Class.                                                     --
         --Userage:                                                                  --
         --1,Create a instance of this object like this:var browser=new browserinfo;--
         --2,user this instance:browser.Version/browser.Name;                        --
         ---------------------------------------------------------------------------*/
        this.Name=Actual_Name;
        this.Version=Actual_Version;
     }
   browserinfo();
 
    document.write("你使用的浏览器是:"+navigator.userAgent);
document.write("<br>");
     document.write("你使用的浏览器是:"+navigator.Actual_Name+",版本号:"+navigator.Actual_Version);
 
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
 
</body>
</html>
posted @   gxldan  阅读(159)  评论(0编辑  收藏  举报
编辑推荐:
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
阅读排行:
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· 程序员转型AI:行业分析
· 深入集成:使用 DeepSeek SDK for .NET 实现自然语言处理功能
· 为DeepSeek添加本地知识库
· .NET程序员AI开发基座:Microsoft.Extensions.AI
点击右上角即可分享
微信分享提示