JavaScript兼容那点事.doc

JavaScript兼容那点事1. 背景浏览器的兼容性有时确实很让人头疼，或许当你了解了当中的技巧跟原理后，就会觉得其实也不是难事。2. 概述浏览器兼容性问题，是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况，在大多数情况下的需求是，无论用户用什么浏览器来查看网站或者登陆系统，都应该是统一的显示效果。随着浏览器版本的增多，解决浏览器兼容性显得尤为重要。所以本文将介绍一些常用的兼容性问题及解决技巧，当然有许多优秀的开源框架在这方面做了很大的努力，方便我们开发使用（jQuery、Dojo、Prototype、Mochikit、Mootools等等）。3. 常用兼容性问题以下兼容性性为他主要针对IE与Firefox。3.1. 浏览器类型与版本判断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.1Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3Mozilla/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.13Mozilla/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。下面是判断浏览器的代码： var Sys = ; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie (d.+)/) ? Sys.ie = s1 : (s = ua.match(/firefox/(d.+)/) ? Sys.firefox = s1 : (s = ua.match(/chrome/(d.+)/) ? Sys.chrome = s1 : (s = ua.match(/opera.(d.+)/) ? Sys.opera = s1 : (s = ua.match(/version/(d.+).*safari/) ? Sys.safari = s1 : 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);我们把对IE的判断放在第一，因为IE的用户最多，其次是判断Firefox。按使用者多少的顺序来判断浏览器类型，可以提高判断效率，少做无用功。之所以将Chrome放在第三判断，是因为我们预测Chrome很快会成为市场占有率第三的浏览器。其中，在分析浏览器版本时，用到了正则表达式来析取其中的版本信息。3.2. eval(idName)问题IE中：可以使用eval(xxx)来获取id属性为xxx或者name属性为xxx的HTML对象。Firefox中：只能使用eval(xxx)来取得id属性为xxx的HTML对象。解决方法：统一用eval(xxx)来获取id属性为xxx的HTML对象。3.3. document.formName.item(itemName)问题IE中：可以使用下面两种方式获取HTML对象document.formName.item(itemName)；document.formName.elements elementName。Firefox中：只能使用document.formName.elementselementName方式获取HTML对象。解决方法：document.formName.elementselementName方式获取HTML对象。3.4. class属性与for属性IE中：className、htmlFor。Firefox中：class、for。解决方法：HTML的上述两种属性在不同浏览器中将会用不同的名称表示，可以用下面方式来解决：var specailNames = class:className,for:htmlFor/ 查找函数function getAttr(node,attrName)var attr = node.getAttribute(attrName);if(!attr & attrName in specailNames)attrName = specailNamesattrName;attr = node.getAttribute(attrName);return attr;3.5. select标签对象方法IE中：s.add(option)：将option添加到options的最后s.add(option,index)：将option添加到options的index位置FireFox中：s.add(option,null)：将option添加到options的最后s.add(option,refOption)：将option添加到refOption的前面解决方法：HTML的上述两种属性在不同浏览器中将会用不同的名称表示，可以用下面方式来解决：function addOpt(sel,opt,index) / select对象，option对象，index下标索引var IE = navigator.userAgent.indexOf(MSIE)-1;if(IE)sel.add(opt,index);elsesel.add(opt,index=undefined?null:sel.optionsindex);return sel;3.6. event事件对象IE中：存在一个全局变量event，执行事件处理函数时浏览器会自动为其赋值，执行完毕时销毁FireFox中：执行事件函数时浏览器会默认传入这个对象检测（对象检测）：function getEvent(evt)evt = evt | event;return evt3.7. 事件处理函数IE中：object要添加事件的对象；evtype事件对象，带on前缀；fn事件处理函数，fn中的this指向window，且同一函数可以多次注册并会多次执行object.attachEvent(evtype,fn)；object.detachEvent(evtype,fn)；FireFox中：object要添加事件的对象；evtype事件对象，不带on前缀；fn事件处理函数，fn中的this指向事件源object；useCapture是否使用捕获事件流，否则为冒泡事件流object.addEventListener(evtype,fn,useCapture)；object.removeEventListener(evtype,fn,useCapture)；解决方法：（evtype不带on）function addEvent(obj,evtype,fn)if(obj.addEventListener)obj.addEventListener(evtype,fn,false);elseobj.attachEvent(on+evtype,function() /解决IE中this指向window的问题fn.call(obj););function delEvent(obj,evtype,fn)if(obj.removeEventListener)obj.removeEventListener(evtype,fn,false);elseobj.detachEvent(on+evtype,fn,false);3.8. HTML对象获取问题IE中document.idname或者document.getElementById(idName)FireFox中：document.getElementById(idName)解决办法：统一使用document.getElementById(idName)3.9. const问题IE中：只能使用var关键字来定义常量Firefox中：可以使用const关键字或var关键字来定义常量解决方法：统一使用var关键字来定义常量。3.10. event.x与event.y问题IE中：event对象有x、y属性，但是没有pageX、pageY属性Firefox中：event对象有pageX、pageY属性，但是没有x、y属性解决方