当前位置:17727 > www.17727.com > 版本的代码_javascript技巧_脚本之家,中css方法对

版本的代码_javascript技巧_脚本之家,中css方法对

文章作者:www.17727.com 上传时间:2019-12-26

先来看现象: 复制代码 代码如下:

复制代码 代码如下:function isBrowser(卡塔尔{var Sys={};var ua=navigator.userAgent.toLowerCase(卡塔尔国;var s;(s=ua.match?Sys.ie=s[1]:(s=ua.match?Sys.firefox=s[1]:(s=ua.match?Sys.chrome=s[1]:(s=ua.match?Sys.opera=s[1]:(s=ua.match.*safari/))?Sys.safari=s[1]:0;if{//Js判定为IE浏览器alert('//www.jb51.net'+Sys.ie卡塔尔(英语:State of Qatar);if{//Js推断为IE 9}else if{//Js判别为IE 8}else{}}if{//Js判定为火狐浏览器alert('//www.jb51.net'+Sys.firefox卡塔尔(قطر‎;}if{//Js决断为谷歌(Google卡塔尔chrome浏览器alert('//www.jb51.net'+Sys.chrome卡塔尔(قطر‎;}if{//Js推断为opera浏览器alert('//www.jb51.net'+Sys.opera卡塔尔(قطر‎;}if{//Js判定为苹果safari浏览器alert('//www.jb51.net'+Sys.safari卡塔尔(قطر‎;}}

IE6/7/8:设置未中标 IE9/10/Firefox/Safari/Chrome/Opera:设置成功 又如选取styleFloat设置浮动: 复制代码 代码如下:

结果为:200 全数浏览器都拿到精确的结果 把插入的成分改为IMG 复制代码 代码如下:

JavaScript是前端开辟的最首要语言,我们能够通过编写制定JavaScript程序来决断浏览器的品类及版本。JavaScript剖断浏览器类型常常有三种艺术,风姿罗曼蒂克种是依赖种种浏览器唯有的质量来辨别,另生机勃勃种是通过解析浏览器的userAgent属性来剖断的。在超级多动静下,值决断出浏览器类型之后,还需剖断浏览器版本技艺管理宽容性难题,而剖断浏览器的版本平时只可以通过分析浏览器的userAgent本领明白。

要素div未有设置浮动,由此暗中认可应该回到“none”。但结果是 IE6/7/8 : 再次回到空字符串"none" IE9/Firefox/Safari/Chrome/Opera : 重回空字符串 又如运用cssFloat设置浮动: 复制代码 代码如下:

有消除过此主题材料或有关于此难题更详尽的认知的大鸟还望多多指教.. 复制代码 代码如下: $.ready.append; $.load{ alert.attr("src", "//www.jb51.net/images/logo.gif"卡塔尔(英语:State of Qatar); }卡塔尔;

Opera

IE6/7/8/9/10/Opera:设置成功(Opera是个怪人,styleFloat和cssFloat都扶持) Firefox/Safari/Chrome:设置不成事 因而,使用css方法拿到或安装浮动时为防止各浏览器差距依然规行矩步的运用float。不要选择styleFloat或cssFloat。 当然若是那算jQuery的bug,那么修复也是超级轻巧的 1,修正jQuery.css方法,加个styleFloat的剖断。 复制代码 代码如下: // cssFloat needs a special treatment if ( name === "cssFloat" || name === "styleFloat"卡塔尔 { name = "float"; } 那样使用$ 就从未宽容性难点了。 2,校正jQuery.style方法,加个推断假诺传styleFloat或cssFloat都转成float 复制代码 代码如下: // Don't set styles on text and comment nodes if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style 卡塔尔 { return; } // 那是加的修复代码 if( name === "cssFloat" || name === "styleFloat" 卡塔尔(英语:State of Qatar) { name = "float" } // Make sure that we're working with the right name var ret, type, origName = jQuery.camelCase, style = elem.style, hooks = jQuery.cssHooks[ origName ]; 那样使用$.css 或 $.css("styleFloat", "right"卡塔尔国各浏览器就都ok了。

结果为: Opera:34 Firefox:0 IE:28 Chrome:0 Safari:0 再F5刷新一下,结果为: Firefox:693 IE:693 Opera:693 Chrome:0 Safari:0 Safari和Chrome始终为0。 应该可知为在图纸并未加载或展现完结时总括出的图形宽高也是不正确的,刷新后应当是有了缓存,所以结果就不易了,但怎么Chrome 和Safari始终都为0啊?而且IE和OPERA居然风度翩翩带头还有大概会总括出多个不当班值日出来的。 改成上面这样就都好了: 复制代码 代码如下:

如此能够使JavaScript代码更加精练些。当然,可读性稍差不离,就看您是爱护成效依旧偏重可维护性了。

float div

我们先来解析一下各类浏览器的特征及其userAgent。

float div

Opera提供了特意的浏览器标记,便是window.opera属性。Opera标准的userAgent如下:

但jQuery非要班门弄斧,加上对cssFloat和styleFloat的支撑,见API文书档案,举例获取成分的float属性时,以下是等价的。1 $.css; 2 $.css; 3 $.css; 但方式3在各种浏览器中重回值不一致,比方利用styleFloat获取浮动 复制代码 代码如下:

jQuery 1.9使用$.support替代$.browser方法

jQuery的css方法统一了二种写法,直接运用float属性就可以,如下css方法中传参数“float”即能够安装也得以拿走成分的float。 复制代码 代码如下:

复制代码 代码如下:var Browser=new Object(卡塔尔;Browser.isMozilla=(typeof document.implementation!='undefined')&&(typeof document.implementation.createDocument!='undefined')&&(typeof HTMLDocument!='undefined');Browser.isIE=window.ActiveXObject ? true : false;Browser.isFirefox=(navigator.userAgent.toLowerCase!=-1);Browser.isSafari=(navigator.userAgent.toLowerCase!=-1);Browser.isOpera=(navigator.userAgent.toLowerCase!=-1);function check(){alert(Browser.isIE?'ie':'not ie');alert(Browser.isFirefox?'Firefox':'not Firefox');alert(Browser.isSafari?'Safari':'not Safari');alert(Browser.isOpera?'Opera':'not Opera');}window.onload=check;

float div

[Ctrl+A 全选 注:如需引进外界Js需刷新技术实行]

float div

如上的代码都以为了营造前端框架所做的预备性研究,并在中国共产党第五次全国代表大会浏览器上测量检验通过。现在,判别某种浏览器只需用if或if等情势,而判定浏览器版本只需用if或if等花样,表明起来依然那些文雅的。

IE

中间,选取了“... ? ... : ...”这样的剖断表达式来轻易代码。判定规范是一条赋值语句,既达成正则表达式的相配及结果复制,又径直作为基准剖断。而随之的版本消息只需从眼前的非凡结果中领取就可以,那是可怜便捷的代码。

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 Version/3.1 Safari/525.13 Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 Version/3.0 Mobile/4A93 Safari/419.3

Mozilla/5.0 (Windows; U; Windows NT 5.2卡塔尔 Gecko/2009070208 Firefox/3.0.1 Mozilla/5.0 (Windows; U; Windows NT 5.1卡塔尔 Gecko/20050309 Firefox/2.0.0.3 Mozilla/5.0 (Windows; U; Windows NT 5.1卡塔尔(قطر‎ Gecko/二〇〇七0803 Firefox/1.5.0.12 当中,版本号是Firefox之后的数字。

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)

jQuery 从 1.9 版开首,移除了 $.browser 和 $.browser.version , 替代它的是 $.support 方法,假使急需驾驭 $.support 请参见:

风趣的是,Chrome的userAgent还隐含了Safari的表征,大概那正是Chrome可以运作具备Apple浏览器选取的底子呢。

只要打听了以上音讯,我们就足以根基这个特点来判别浏览器类型及其版本了。我们会将判定的结果保存在Sys名字空间中,成为前端框架的骨干标记音讯,供之后的主次来读取。如若判断出谋种浏览器,Sys名字空间将有二个该浏览器名称的属性,其值为该浏览器的版本号。比如,如若推断出IE 7.0,则Sys.ie的值为7.0;假设判别出Firefox 3.0,则Sys.firefox的值为3.0。上面是决断浏览器的代码:

此中,版本号在Chrome只后的数字。

其版本号是Version之后的数字。

前端框架项目现已运转,一切就看经过和结果了...

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

Chrome有叁个Message伊芙nt函数,但Firefox也许有。但是,幸好Chrome并从未Firefox的getBoxObjectFor函数,依照这一个原则如故得以确切判定出Chrome浏览器的。前段时间,Chrome的userAgent是:

Firefox中的DOM元素都有一个getBoxObjectFor函数,用来博取该DOM成分之处和大小(IE对应的中是getBoundingClientRect函数)。那是Firefox唯有的,剖断它就能够以知道道是日前浏览器是Firefox。Firefox多少个本子的userAgent大概如下:

独有IE协理创造ActiveX控件,由此她有三个别样浏览器未有的事物,便是ActiveXObject函数。只要判定window对象存在ActiveXObject函数,就能够鲜明决断出脚下浏览器是IE。而IE各种版本规范的userAgent如下:

意气风发经您的JavaScript玩得相当的高,你还能将日前的论断代码写成这么:

在网址前端开采中,浏览器宽容性难点本已让大家语无伦次,Chrome的诞生不精晓又要给大家添多少乱子。浏览器包容性是前端开拓框架要消除的率先个难题,要缓和包容性难题就得首先正确剖断出浏览器的体系及其版本。

[Ctrl+A 全选 注:如需引进外界Js需刷新手艺推行]

www.17727.com,剧本之家我又为大家收拾了多少个代码:

复制代码 代码如下:$.ready{varbrow=$.browser;varbInfo="";if{bInfo="MicrosoftInternetExplorer"+brow.version;}if{bInfo="MozillaFirefox"+brow.version;}if{bInfo="AppleSafari"+brow.version;}if{bInfo="Opera"+brow.version;}alert;

应用分裂特点来判定浏览器的点子,即使在进度上比用正则表达式解析userAgent要来的快,但是这几个特色恐怕会随浏览器版本而转换。比如,生龙活虎种浏览器本来独有的特色得到了市情上的名利双收,其余浏览器也就只怕随之步向该天性,进而使该浏览器的唯有特色消失,引致大家的决断退步。因而,相对相比较有限支撑的做法是因此拆解剖析userAgent中的特征来剖断浏览器类型。何况,反正判定版本消息也亟需解析浏览器的userAgent的。

Firefox

Safari

透过分析每一样浏览器的userAgent新闻,轻易得出分辨各个浏览器及其版本的正则表明式。並且,对浏览器类型的论断和版本的论断完全能够合为大器晚成体地扩充。于是,我们能够写出下边包车型客车代码:

共享一个通过jquery获取浏览器类型和浏览器版本号的函数方法。具体jquery代码如下:

中间,版本号是MSIE之后的数字。

里面,版本号是贴近Opera的数字。

Safari浏览器中有一个别样浏览器没有的openDatabase函数,可做为决断Safari的标识。Safari标准的userAgent如下:

大家把对IE的论断放在第风流倜傥,因为IE的客商最多,其次是推断Firefox。按使用者多少的依次来决断浏览器类型,能够升高判别功能,少做无用功。之所以将Chrome放在第三判断,是因为我们估量Chrome异常快会形成商场占有率第三的浏览器。当中,在深入分析浏览器版本时,用到了正则表明式来析取当中的版本信息。

[Ctrl+A 全选 注:如需引入外界Js需刷新才具试行]

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 Chrome/0.2.149.27 Safari/525.13

Chrome

本文由17727发布于www.17727.com,转载请注明出处:版本的代码_javascript技巧_脚本之家,中css方法对

关键词: