第八章　检测浏览器和操作系统

于 2009-06-13 12:21:45 发布
阅读量258 收藏
点赞数
分类专栏： JavaScript高级程序设计读书笔记 文章标签： 浏览器 应用服务器 Opera Windows Safari
  • 8.1 navigator对象

 

  • 8.2 检测浏览器的方式


主要有两种方式来检测浏览器:1.对象/特征检测法 2.user-agent字符串检测法


  • 8.2.1对象/特征检测法  
       

if(document.getElementById) { //the method exists, so user it here } else { //do something else }

 

 

 

 

 

 

 

 
 

  • 8.2.2 user-agent字符串检测法
 

 

 常见的浏览器user-agent字符串：
 

  
 

浏览器user-agent字符串
Internet Explorer6.0(Windows XP) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) 
 Mozilla 1.5(Windows XP) 
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5)Gecko/20031007 
Firefox 0.92(Window XP) Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7)Gecko/20040707 Firefox/0.8 
 Opera 7.54(Windows XP) Opera/7.54(Windows NT 5.1; U) 
Safari 1.25(MacOS X) 
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en)　Apple-Webkit/124 (KHTML,like Gecko) Safari/125.1　
 


　   
 

  • 8.3 user-agent 字符串简史
 

 

  • 8.3.1  Netscape Navigator 3.0 与　IE3.0 
 

       Netscape Navigator 3.0　的user-agent的字符串格式非常简单：如下：
 

　　　　Ｍozilla/Appversion (Platform; Security [; Os-or CPU-Description])
 

　　　例如：运行于Ｗindows 95上的Ｎetscape Navigator 3.0 user-agent如下：
 

　　　　Mozilla/3.0(Win95; I)
 

        注：Ｉ表示安全较低　　Ｎ表示没有安全　　Ｕ表示１２８位加密安全性（在美国大部分现在的浏览器都有１２８位安全性）
 

 
 

　　　微软引入ＩＥ３．０,并提供了一个与Netscape Navigator 完全兼容的user-agent字符串．这样任何检查它（当时针对Netscape进行检查是一种标准）的服务器就会允许ＩＥ浏览页面．
 

 
 

　　　格式：Mozilla/2.0 (compatible; MSIE [IEVersion];[OS]);
 

 
 

        例如运行于Ｗindows 95上的IE 3.02有如下user-agent字符串：
 

　　　　　Mozilla/2.0 (compatible; MSIE 3.02;Windows 95);
 

 
 

 
 

　　　本来开发人员只希望用一个酸法就能检测出３．０的浏览器，例如：
 

　　　if(parseFloat(navigator.appVersion)>=3.0){
 

            //do 3.0-level stuff here
 

        }
 

 
 

        现在酸法变为：
 

　　　if(navigator.userAgent.indexOf("MSIE") > -1){
 

           //IE,now check the version
 

           if(navigator.userAgent.indexOf("MSIE 3.") > -1){
 

               //do ie 3.0 brower stuff here 
 

           }
 

        }else if(parseFloat(navigator.appVersion) >= 3){
 

              //do other 3.0 brower stuff here 
 

           
 

        }
 

  
 

        因为Netscape和微软用了不同的字符串来表示同一个操作系统，所以对操作系统必须进行两次检验．例如：
 

　　　　var isWin95 = navigator.userAgent.indexOf("Wind95") > -1 || navigator.userAgent.indexOf("Windows 95") > -1;
 

  • 8.3.2  Netscape Communicator 4.0 与　IE4.0 
 

    Netscape Ｃommunicator ４.0  
 

　 检测浏览器和版本以及操作系统方法和Ｎetscape Navigator 3.0检测方法一样
 

 
 

    IE4.0发布，这次将Mozilla的版本改成4.0了
 

　　Ｍizilla/4.0 (compatible; MSIE [IEVersion]; [OS])
 

     例如：运行在Ｗindows 98上的ＩＥ４．０ 返回如下：
 

　　　Mozilla/4.0(compatible; MSIE 4.0; Windows 98)
 

 
 

     所以确定浏览器是否为４．０:
 

      if(parseFloat(navigator.appVersion) > = 4.0){
 

          //do 4.0-level stuff here
 

      }
 

 
 

 
 

     但是微软为ＭacOS发布的ＩＥ４．５很让人困惑，版本如下：
 

　　Mozilla/4.0(copatible; MSIE 4.5;Mac_PPC)
 

 
 

　　　
 

  • 8.3.3  IE5.0及更高版本 
 

      user-agent还存在同样混乱的问题：
 

　　　如：在Ｗindows NT 4.０上运行的ＩＥ５．０返回的user-agent字符串：
 

　　　　　　　Ｍozilla/4.0 (compatible; MSIE 5.0; Window NT)
 

            ５.5,6.0同样存在,如6.0
 

　　　　　　　Mozilla／4.0 (compatible; MSIE 6.0; Windwos NT)
 

  • 8.3.4  Mozilla 
 

       作为Netscape 6 (Mozilla)开发的一部分，开发人员起草了一份简短的文档作为user-agent字符串的标准．
 

　　　　
 

　　　Ｍozilla/MozillaVersion (Platform ; Security ; OS-or-CPU ; Localization infomation? [; PrereleaseVersion ]* [; Optional Other Comments] ) Gecko/GeckoVersion           
 

           [ApplicationProduct/ApplicationProductVersion]       
 

     
 

   
 

字符串是否必须描述
MozillaVersion是 Mozilla 的版本
Platform是 使用操作系统的类型．可能的值：Windows\Macintosh\X11(Unix上的)
Security是 浏览器的安全性．可能的值：Ｎ（没有安全性），u( 高度安全性)，Ｉ（弱安全性）
OS-or-CPU 是 浏览器运行的操作系统或者是运行浏览器的计算机的处理器类型．如果Platform是Windows，那么这是Windows的版本（如WinNT或Win 95 等等）．如果platform是Macintosh，那么这是CPU的类型(68Khuozhe  PPC代表PowerPC).如果Platform是X11,那么这是Unix操作系统的名称从Unix命令uname-sm中获得
Localization infomation是 浏览器语言．典型的是美国使用的en-US
PrereleaseVersion否 用于这个浏览器的开放源代码的Mozilla代码的基础版本．注意，这个一直未被使用，直到Mozilla 0.9.2（Netscape 6.1）
Optional Other Comments否 这是留给各自的Mozilla实现添加额外信息的空间
GeckoVersion 是 使用Gecko渲染引擎的版本．这是按照yyyymmdd格式的日期
ApplicationProduct否 使用Mozilla代码的品派浏览器的名称．在Netscape 6 发行版中，这个是Netscape６：Ｎetscape7改成Netscape
ApplicationProductVersion否 使用Mozilla代码品牌浏览器的版本
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

　  运行于Ｗindows XP 的Ｎetscape 6.2.1:
 

     Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1
 

 
 

 　 为什么ＭozillaＶersion是５.0版呢？
 

 
 

　　Ｎetscape　７．１是Ｎetscape系列浏览器的最后一个版本．ＡＯＬ更新了她与为软的许可证条款来使ＩＥ作为ＡＯＬ软件内置的浏览器，然后就解散了Ｎetscape小组．
 

　　现在Mozilla项目依然在发布自己的新版本的浏览器，同时还有一个更易用的版本，叫做Firefox
 

  •  8.3.5  Opera   
 

     基本的格式如下：
 

　　Opera/AppVersion (OS; Security) [Language]
 

 
 

    如在Windows XP计算机上使用Opera 7.54　的user-agent如下显示：
 

　　
 

　　Opera/7.54 (Windows NT 5.1; U) [en]
 

 
 

     注：在7.0版本之前，Opera使用解释过的Windows操作系统字符串的意思．例如　Windows NT 5.1使用Windows XP.为了和标准兼容，7.0使用官方报告的操作系统版本．
 

 
 

　　伪装：
 

　　Opera 伪装Mozilla   5.0如下：
 

　　　
 

　　　　　　Mozilla /5.0 (Windows NT 5.1; U) Opera 7.54
 

 
 

　　Opera 伪装Mozilla　4.78
 

                  
 

                   Mozilla /4.78 (Windows NT 5.1; U) Opera 7.54
 

 
 

     Opera 伪装Mozilla   3.0如下：
 

　　　
 

　　　　　　Mozilla /3.0 (Windows NT 5.1; U) Opera 7.54
 

 
 

    Opera 伪装成ＩＥ6.0
 

                  
 

                  Mozilla/4.0 (compatible; MSIE 6.0;Windows NT 5.1) Opera 7.54
 

 
 

 
 

 
 

  • 8.3.6  Safari
 

    　　2004,Ａpple推出该浏览器. 
 

　　　　　Unix的Konqueror浏览器的主要组建－－－＞ＫＨＴＭＬ开源项目－－－＞Ａpple Web Kit---->Safari(作为Ａplle Web KiT的应用程序而被创建)．目前作为所有MacOS X的默认ＷＥＢ浏览器搭载在所　　　　　　　　　　　　　　　　　　
 

　　　　　　有的零售版中．
 

 
 

　　　　Safari的user-agent字符串的基本格式：
 

 
 

　　　　　Ｍozilla/5.0　(Platform; Security; OS-or-CPU; Language) AppleWebKet/AppleWebKetVersion (KHTML,like Gecko) Safari/SafariVersion
 

          
 

          如：
 

 
 

　　　　　Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en)AppleWebKit/124 (KHTML, like Gecko) Safari/Safari125.1
 

  • 8.3.7   结语
 

 
 

  • 8.4  浏览器检测脚本
  •      8.4.1  方法学
 

              实际的做法是检测最小的版本而不是直接检测准确的版本.
 

 
 

 
 

            如:
 

      
 

                 if( isMinIE5 ){
 

                 }
 

 
 

 
 

  •        8.4.2  第一步
 

 
 

             将user-agent字符串及版本信息保存到本地变量中.
 

            
 

                  var sUserAgent = navigator.userAgent;
 

                  var fAppVersion = parseFloat(navigator.appVersion);
 

 
 

           两个版本字符串比较的最好办法是:               
 

                                          
 

                function compareVersions(sVersion1,sVersion2){
 

                           //转换成数组
 

                                        var aVersion1 = sVersion1.split(".");
 

                                        var aVersion2 = sVersion2.split(".");
 

                                        
 

                                        //缺位补0
 

                                        if(aVersion1.length > aVersion2.length){
 

 
 

                                               for(int i = 0; i < aVersion1.length - aVersion2.length; i++){
 

                                                           aVersion2.push("0");
 

                                               }
 

                                        }
 

 
 

                                        else if(aVersion1.length < aVersion2.length){
 

 
 

                                               for(int i = 0; i < aVersion2.length - aVersion1.length; i++){
 

                                                           aVersion2.push("0");
 

                                               }
 

                                        }
 

 
 

                                        //比较   
 

 
 

                                        for( int i = 0; i < aVersion1.length; i++){
 

                                               
 

                                               if(aVersion1[i] > aVersion2[i]){
 

 
 

                                                     return 1;
 

                                                }
 

                                                 
 

                                                if(aVersion1[i] > aVersion2[i]){
 

                                                     rturn -1;
 

                                                }
 

                                               
 

                                       }
 

                     
 

                                       return 0;
 

                                         
 

 
 

                             }
 

 
 

 
 

  •        8.4.3 检测Opera
 

              先考虑下Opera字符串格式
 

 
 

　　　　　　　Opera/7.54 (Windows NT 5.1; U)
 

                   Mozilla/5.0 (Windows NT 5.1; U) Opera 7.54
 

                   Mozilla/4.78 (Windows NT 5.1;U ) Opera 7.54
 

                   Mozilla/3.0 (Windows NT 5.1;U ) Opera 7.54
 

                   Mozilla/4.0 (compatible;MSIE 6.0; Windows NT 5.1) Opera 7.54
 

         
 

           考虑到所有串都包含Opera子串，而其它浏览器并未包含该子串，检测是否是Opera:
 

                
 

                   var isOpera = sUserVersion.indexof("Opera") > -1;
 

 
 

　　　　检测版本：
 

　　　　　　　　　　　　
 

　　　　　　　var isMinOpera4 = isMinOpera5 = inMinOpera6 =inMinOpera7 =inMinOpera7_5 =false;
 

                   if(inOpera){
 

                        var fOperaVersion;
 

                        if(navigator.appName == "Opera"){
 

                            fOperaVersion = fAppVersion;
 

                        }else{
 

                            var reOperaVersion = new RegExp("Opera (\\d+\\.\\d+)");
 

                            reOperaVersion.test(sUserAgent);
 

                            fOperaVersion = parseFloat(RegExp.["$1"]);
 

                        }
 

 
 

                         isMinOpera4 = fOperation >= 4;
 

                         isMinOpera4 = fOperation >= 5;
 

                         isMinOpera4 = fOperation >= 6;
 

                         isMinOpera4 = fOperation >= 7;
 

                         isMinOpera4 = fOperation >= 7.5;
 

                        
 

                   }　　　　　
 

 
 

 
 

 
 

  •    8.4.4 检测Konqueror/Safari 
 

             基于Khtml的user-agent的字符串：
 

 　　　　　　　　　　
 

　　　　　　　　Mozilla/5.0 (compatible; Konqueror/2.2.2; SunOS)
 

                        Mozilla/5.0 (compatible; Konqueror/3; Linux; de,en_US,de_DE)
 

                        Mozilla/5.0 (compatible; Konqueror/3.1; Linux 2.4.20)
 

                        Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML,like Gecko)
 

 
 

                        Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/51 (like Gecko) Safari/51
 

                        Mozilla/5.0 (Macintosh; U; PPC Mac OS X; es-es) AppleWebKit/106.2 (KHTML, like Gecko) Safari/100.1
 

                        Mozilla/5.0 (Macintosh; U; PPC Mac OS X; es-es) AppleWebKit/124 (KHTML, like Gecko) Safari/125.1
 

 
 

                        前四个字符串出自Konqueror,最后三个出自Safari.
 

 
 

               检测是否基于khtml:
 

                        
 

                      var isKhtml = sUserAgent.indexOf("KHTML") > -1 
 

                                            || sUserAgent.indexOf("Konqueror") > -1
 

                                            || sUserAgent.indexOf("AppleWebKit") > -1
 

                      
 

               判断是何种KHTML
 

                    
 

                       if(isKHTML){
 

 
 

                                 isSafari = sUserAgent.indexOf("AppleWevKit") > -1;
 

                                 isKonq = sUserAgent.indexOf("Konqueror") > -1;
 

                       }
 

 
 

               设置版本变量：
 

　　　　　　　　
 

　　　　　　　　var isMinSafari1 = isMinSafari1_2 = false;
 

                        var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false;　　　　
 

 
 

              判断版本：
 

　　　　　　　　　　　　　　　　
 

　　　　　　　　if(isKHTML){
 

                               isSafari = sUserAgent.indexOf("AppleWevKit") > -1;
 

                               isKonq = sUserAgent.indexOf("Konqueror") > -1;
 

 
 

                               if(isSafari){
 

                                      var reAppleWebKit = new RegExp("AppleWebKit\\/(\\d+(?:\\.\\d*)?)");
 

                                      reAppleWebKit.test(sUserAgent);
 

                                      var fAppleWebKitVersion = parseFloat(RegExp.["$1"]);
 

 
 

                                      isMinSafari1 =  fAppWebKitVersion >= 85;
 

                                      isMinSafari1_2 = fAppWebKitVersion >= 124;
 

                                     
 

                               }else if(isKonq){
 

                                      
 

                                      var reKonq = new RegExp("Konqueror\\/(\\d+(?:\\.\\d*)?)");
 

                                       reKonq.test(sUserAgent);
 

                                       isMinKonq2_2 = compareVersions(RegExp["$1"],"2.2") >= 0 ; 
 

                                       isMinKonq3 = compareVersions(RegExp["$1"],"3.0") >= 0 ; 
 

                                       isMinKonq3_1 = compareVersions(RegExp["$1"],"3.1") >= 0 ; 
 

                                       isMinKonq3_2 = compareVersions(RegExp["$1"],"3.2") >= 0 ; 
 

                               }
 

   
 

                        }
 

 
 

 
 

 
 

  •  
  
     
   8.4.4 检测IE 
  
     
 

                Mozilla/4.0 (compatible; MSIE 6.0; Windows NT)
 

                
 

                考虑到Opera浏览器的伪装，检测ＩＥ需要下面：
 

　　　　
 

　　　　　　　　　var isIE =  sUserAgent.indexOf("compatible") > -1 
 

                                            && sUserAgent.indexOf("MSIE") > -1
 

                                            && !isOpera;
 

 
 

               检测IE版本：
 

　　　　　　　　　　　　
 

　　　　　　　　　var isMinIE4 = isMinIE5 =isMinIE5_5 = isMinIE 6 = false;
 

                           if(isIE){
 

                             
 

                                   var reIE = new RegExp("MSIE (\\d+\\.\\d+)");
 

                           　　  reIE.test(sUserAgent);
 

                                   var fIEVersion = parseFloat(RegExp["$1"]);　
 

 
 

                                   isMinIE4 = fIEVersion >= 4;
 

                                   isMinIE5 =fIEVersion >= 5;
 

                                   isMinIE5_5 =fIEVersion >= 5.5;
 

                                   isMinIE6 = fIEVersion >= 6.0　　　　　　　　　　　　　 
 

 
 

                          }
 

 
 

  •  
  
     
   8.4.4 检测Mozilla 
  
     
 

             Mozilla 的user-agent字符串:
 

 
 

            Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1
 

 
 

           考虑到Opera伪装Mozilla:
 

           Mozilla/5.0 (Windows NT 5.1; U) Opera 7.54
 

 
 

           但是Mozilla包含字符Gecko   故检测方法:
 

           var isMoz = sUserAgent.indexOf("Gecko") > -1;
 

 
 

           然而基于KHTML的浏览器包含字符 "like Gecko",故
 

 
 

           var isMoz = sUserAgent.indexOf("Gecko") > -1 && !isKHTML;
 

 
 

          检测版本号:
 

 
 

          var isMinMoz1 = isMinMoz1_4 = isMin1_5 =false;
 

          if(isMoz){
 

                 var reMoz = new RegExp("rv:(\\d+\\.\\d+(?:\\.\\d+)?)");
 

                 reMoz.test(sUserAgent);
 

                 isMinMoz1 = compareVersions(RegExp["$1"],"1.0") >= 0;
 

                 isMinMoz1_4 = compareVersions(RegExp["$1"],"1.4") >= 0;
 

                 isMinMoz1_5 = compareVersions(RegExp["$1"],"1.5") >= 0;
 

          }
 

 
 

  •  
  
     
   8.4.5 检测Netscape Communicator 4.0 
  
     
 

       检测浏览器类型:
 

       var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML 
 

                      && (sUserAgent.indexOf("Mozilla") == 0)
 

                      && (navigator.appName == "Netscape")
 

                      && ((fAppVersion >= 4.0) && (fAppVersion <= 5.0));
 

     检测版本:4.0  4.5(主要发布版本,代码做了大量的改进)  4.7(另一个主要发布版本) 4.8(最后版本)
 

       var isMinNS4 = isMinNS4_5 = isMinNS4_7 = isMinNS4_8 =false;
 

       var (isNS4){
 

            isMinNS4 = true;
 

            isMinNS4_5 = fAppVersion >=4.5;
 

            isMinNS4_7 = fAppVersion >=4.7;
 

            isMinNS4_8 = fAppVersion >=4.8;
 

       }
 

 
 

 
 

  •  
  
     
   8.5   平台/操作系统检测脚本 
  
     
 

 
 

  •  
  
     
   8.5.1  方法学 
              
  
     
 

  •  
  
     
   8.5.2  方法学 
  
     
 

             var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
 

           var isMac = (navigator.platform == "Mac68k") || (navigator.platform == "MacPPC") 
 

                            || (navigator.platform == "Macintosh");
 

 
 

  •  
  
     
   8.5.3 检测Windows操作系统  
  
     
 

            var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false;
 

            
 

            if(isWin){
 

 
 

              isWin95 = sUserAgent.indexOf("Win95") > -1 ||  sUserAgent.indexOf("Windows 95") > -1; 
 

 
 

              isWin98 = sUserAgent.indexOf("Win98") > -1 ||  sUserAgent.indexOf("Windows 98") > -1; 
 

 
 

              isWinMe = sUserAgent.indexOf("Win 9x 4.90") > -1 ||  sUserAgent.indexOf("Windows Me") > -1; 
 

 
 

              isWin2K = sUserAgent.indexOf("Win NT 5.0") > -1 ||  sUserAgent.indexOf("Windows 2000") > -1;
 

 
 

              isWinXP = sUserAgent.indexOf("Win NT 5.1") > -1 ||  sUserAgent.indexOf("Windows XP") > -1;
 

 
 

              isWinNT4 = sUserAgent.indexOf(WinNT)  
 

                               || sUserAgent.indexOf("Windows NT") > -1 
 

                               || sUserAgent.indexOf("WinNT4.0") > -1
 

                               || sUserAgent.indexOf("Windows NT 4.0") > -1
 

                               && (!isWinME && !isWin2K && !isWinXP); 
 

          }
 

 
 

  •  
  
     
   8.5.4  检测Macintosh操作系统 
  
     
 

             
 

       
 

　　　　   
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 

                

        

        




    




    

      

        

            

              
                
                  xyl98
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










              

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值