浏览器的判断
一、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、推荐用下面的代码来判断
2、另外一种代码
三、判断浏览器的详细说明
在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,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。下面是判断浏览器的代码:
我们把对IE的判断放在第一,因为IE的用户最多,其次是判断Firefox。按使用者多少的顺序来判断浏览器类型,可以提高判断效率,少做无用功。之所以将Chrome放在第三判断,是因
为我们预测Chrome很快会成为市场占有率第三的浏览器。其中,在分析浏览器版本时,用到了正则表达式来析取其中的版本信息。
如果你的JavaScript玩得很高,你还可以将前面的判断代码写成这样:
这样可以使JavaScript代码更精简些。当然,可读性稍差一些,就看你是重视效率还是重视可维护性了。
使用不同特征来判断浏览器的方法,虽然在速度上比用正则表达式分析userAgent要来的快,不过这些特征可能会随浏览器版本而变化。比如,一种浏览器本来独有的特性取得了市场上
的成功,其他浏览器也就可能跟着加入该特性,从而使该浏览器的独有特征消失,导致我们的判断失败。因此,相对比较保险的做法是通过解析userAgent中的特征来判断浏览器类型。何况,
反正判断版本信息也需要解析浏览器的userAgent的。
通过分析各类浏览器的userAgent信息,不难得出分辨各类浏览器及其版本的正则表达式。而且,对浏览器类型的判断和版本的判断完全可以合为一体地进行。于是,我们可以写出下面的代码:
其中,采用了“... ? ... : ...”这样的判断表达式来精简代码。判断条件是一条赋值语句,既完成正则表达式的匹配及结果复制,又直接作为条件判断。而随后的版本信息只需从前
面的匹配结果中提取即可,这是非常高效的代码。
以上的代码都是为了打造前端框架所做的预研,并在五大浏览器上测试通过。今后,判断某种浏览器只需用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 | <! 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 > |
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 > |
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> |
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> |
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 > |
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 > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· 程序员转型AI:行业分析
· 深入集成:使用 DeepSeek SDK for .NET 实现自然语言处理功能
· 为DeepSeek添加本地知识库
· .NET程序员AI开发基座:Microsoft.Extensions.AI