js在IE和Firefox不同之处

js在IE和Firefox不同之处做Web类项目，不可避免的要涉及浏览器的兼容性问题，特别是javascript的兼容性问题，典型代表就是IE浏览器和FireFox浏览器，了解到不同之处就可以避免出现使用不同浏览器时可能会出现的兼容性问题，找了一些关于js在IE和FireFox中区别的资料，以供参考。:88884m-P1P;@"w4Z*m1.document.form.item问题问题：信息平台(w$\;{!H%d-m!K*K现有代码中存在许多document.formName.item("itemName")这样的语句，不能在Firefox下运行7^0R6s$}3x7J*b+J0_解决方法：统一使用document.formName.elements["elementName"]1])]%d$k8M2.集合类对象问题问题：*o!W-c+]3HI3|#y*a0N7`.OIE下,可以使用()或[]获取集合类对象；Firefox下，只能使用[]获取集合类对象;o!?'v$W)n;j解决方法：改用[]作为下标运算。如：document.forms("formName")改为document.forms["formName"]又如：document.getElementsByName("inputName")(1)改为document.getElementsByName("inputName")[1]&H$O+v:`,Wo3~$m0K3.event)o"a(F1k"nZ#w#@获取event问题：4PC:r9v)Ls&v!Uwindow.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。解决方法：在IE中，不能把Event对象作为参数传递给事件处理程序，只能用window.event或者event来引用Event对象。-r#m2c#J5I-B(RFirefox中获取event的方法：信息平台+V(~%~*O"F*[9U)V(1)从HTML页面传递参数event(2)event=arguments.callee.caller.arguments[0];,I"s-`4e4|5o*Q;GyfunctiongetEvent(evt){evt=evt?evt:(window.event?window.event:null);}event属性问题：IE下，event对象有x，y属性，但是没有pageX，pageY属性；Firefox下，event对象有pageX，pageY属性，但是没有x，y属性。*Y3c5p5x)C5q-{6Z,J6EFirefox中的event.pageX相当于IE中的event.x解决方法：event.x=event.x?event.x:event.pageX;3P7`&f8_3D,k,Y4^4W8t8Y其它：#C2K2V(B6H"^event.layerX在IE与火狐中都有，具体意义有无差别尚未试验。3t/k,r"d1`/S;y0p4.HTML对象的id作为对象名的问题'~%k0h,u5c;m*t9U问题：在IE中，HTML对象的ID可以作为document的下属对象变量名直接使用，而在Firefox中不能。解决方法：统一用getElementById("idName")代替idName作为对象变量使用。5.用idName字符串取得对象的问题:8888)U%LC2m:W0C-p3_)p问题：在IE中，利用eval(idName)可以取得id为idName的HTML对象，而在Firefox中不能。8q%a%x,E5\/[&E/h8s$Y解决方法：*R!D|8d,q7](M统一使用getElementById(idName)代替eval(idName)信息平台Ez+t2j9`,T)P#a6.变量名与某HTML对象id相同的问题)p-bN,Q!_+E$r4j问题：IE中HTML对象的ID可以作为document的下属对象变量名直接使用；而Firefox则不能。在Firefox中，使用与HTML对象ID相同的变量名；IE下则不能。解决方法：6c&v&~0F(D8N(^:A统一使用使用document.getElementById("idName")代替document.idName1y:A'|8~7y%X#a在声明变量时，一律加上var，以避免歧义。:8888L)L:M,V:|7W&{此外，最好不要取与HTML对象id相同的变量名，以减少错误。:?/t6L;i5C4V2x)_%|;\8b.v%d0Z%w8.frame问题问题：!b1|$o&u%K;c#n(~'zn在IE中可以用window.testFrame取得该frame，而Firefox中不行信息平台#p3E)O%q&U*p解决方法：%@#S9_%]'s/j!}在frame的使用方面火狐和ie的最主要的区别是：)F;s;w1\;?2d<framesrc="xx.htm"id="frameId"name="frameName"/>:8888/c[1Q(]'q.KIE可以通过id或者name访问这个frame对应的window对象而Firefox只可以通过name来访问这个frame对应的window对象/C5q/w'w.I.H+K:s如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问IE：window.top.frameId或者window.top.frameName来访问这个window对象Firefox：只能这样window.top.frameName来访问这个window对象另外，在火狐和IE中都可以使用window.top.document.getElementById("frameId")来访问frame标签并且可以通过window.top.document.getElementById("testFrame").src='xx.htm'来切换frame的内容信息平台$cF,m&I4{也都可以通过window.top.frameName.location='xx.htm'来切换frame的内容信息平台0M'O.`c5s,oY#z'F'Q9.在Firefox中，自己定义的属性必须getAttribute()取得1v0C7l*R!Mif(document.all){//IE下为dlg对象添加事件9S/O)i:]#s+n$D%X'Z:Tdlg.setAttribute("onmousedown",function(){move_Div(this);});}else{//Firefox下为dlg对象添加事件:88886N6Y!t*[*?f*h%];z/Odlg.setAttribute("onmousedown","move_Div(this);");0u0U4x!_*u}10.在Firefox中没有parentElementchildren而用parentNodechildNodes4b$}"_3y;V6~childNodes的下标的含义在IE和Firefox中不同，Firefox使用DOM规范，childNodes中会插入空白文本节点firefox下childNodes会把换行和空白字符都算作父节点的子节点,而ie的childNodes和children不会。,w+_$|"j*Y7k'V一般可以通过node.getElementsByTagName()来回避这个问题。8z+U6o(R2?4N&o7k8v当html中节点缺失时，IE和Firefox对parentNode的解释不同，例如6l)a#~&S0@<form>;o5Q0i6T+['l#i4N.{%_<table>0v;{*T5G#^+cj)h<input/></table></form>Firefox中input.parentNode的值为form,而IE中input.parentNode的值为空节点5t5]3f*p$G+\Firefox中节点没有removeNode方法，必须使用如下方法node.parentNode.removeChild(node):88882r2F9C+t%@$y"h2L11.const问题问题:#n'r6S%O"O'M7M;?1S#n在IE中不能使用const关键字。如constconstVar=32;在IE中这是语法错误。信息平台0~%Z8X1T#K2f方法:不使用const，以var代替。:88887W4y$P0O8T4m){;U2Y#J;O12.body对象Firefox的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在3h+l0]8L4Fw9u13.urlencoding信息平台3v&c2_.C$i(u8A在JS中如果书写url就直接写&不要用&5G0t0c6H4b:x(u!\如果varurl='xx.jsp?objectName=xx&objectEvent=xxx';2{3Ce5C:z$L8c6i那么frm.action=url时，url很有可能不会被正常显示以至于参数没有正确的传到服务器，一般会服务器报错参数没有找到。-n.~0o/F*|"p9r;}/v当然在tpl中例外，因为tpl中符合xml规范，要求&书写为&信息平台8`5d6\;|/?`一般Firefox无法识别JS中的&+~3J#B*~X0t/N9w/q8I14.nodeName和tagName问题4p6w0]6?-O6?问题：5y9S+D1@"C$C%R%R%_-O在Firefox中，所有节点均有nodeName值，但textNode没有tagName值。在IE中，nodeName的使用好象有问题。解决方法：信息平台,R9~9K.W#I3K,S使用tagName，但应检测其是否为空。.U#@9^0d1n(h15.input.type属性问题信息平台$N:Z$x#J)X(U/zIE下input.type属性为只读，但是Firefox下可以修改信息平台1p!c3b:l7f%W7[3z.^16.document.getElementsByName()和document.all[name]的问题问题：在IE中，getElementsByName()、document.all[name]均不能用来取得div元素（是否还有其它不能取的元素还不知道）。:I$t6\&s"{!v#n!B&c'@'`+j17.event.srcElement问题6M.@0p9u9D-B#b"C.R问题:IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。解决方法：使用obj(obj=event.srcElement?event.srcElement:event.target;)来代替IE下的event.srcElement或者Firefox下的event.target18.模态和非模态窗口问题问题:IE下，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；Firefox下则不能。信息平台0_;[3J#T,O/^解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口。例如：varparentWin=window.opener;+o.h%b5J9|$XparentWin.document.getElementById("Aqing").value="Aqing";/j"d/g#?"n7a$[)u3ik19.事件委托方法J)CV1L)\!h8_IE：document.body.onload=inject;//Functioninject()在这之前已被实现信息平台+z*i+H4M%Y,^)j7T{'DFirefox：document.body.onload=inject();有人说标准是：document.body.onload=newFunction('inject()');&fY-F&Z7X8c20.firefox与IE(parentElement)的父元素的区别:8888;?1x4U$~-c+o0H0t)b&F6Y"wIE：obj.parentElementfirefox：obj.parentNode解决方法:因为firefox与IE都支持DOM，因此使用obj.parentNode是不错选择。21.cursor:handVScursor::8888$U(k!O(o-u'U)y5d*O-K,OFirefox不支持hand，但IE支持:8888)J!m0T;p,w解决方法:统一使用pointer0{'e-u6R%i6m22.innerText在IE中能正常工作，但是innerText在FireFox中却不行.*?$E+Q%A#?解决方法:7t*^8G$y6M(i1wif(navigator.appName.indexOf("Explorer")>-1){~(J&p*Z+`5y+@3r/K1adocument.getElementById('element').innerText="mytext";}else{document.getElementById('element').textContent="mytext";!V1?2b3}2}9r+]$H}*d1y"\;c&b"t23.FireFox中类似obj.style.height=imgObj.height的语句无效:88880P+R(m.Q1c5^:Q!q.t解决方法：obj.style.height=imgObj.height+'px';:8888:[*IW%}8s1Z2V)c24.IE,Firefox以及其它浏览器对于table标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用。解决方法：//向table追加一个空行varrow=otable.insertRow(-1);varcell=document.createElement("td");cell.innerHTML="";cell.className="XXXX";信息平台+{1V)O8N8i#i)hrow.appendChild(cell);25.padding问题:8888&^!H)j;x%e3e!MFireFox无法解释padding5px4px3px1px简写，必须改成padding-top:5px;padding-right:4px;padding-bottom:3px;padding-left:1px;信息平台-x.j4P#A#V6N7b7o4D+f26.消除ul、ol等列表的缩进时样式应写成：list-style:none;margin:0px;padding:0px;8N:y4pP-y&n5s%X'G,_2h其中margin属性对IE有效，padding属性对FireFox有效6_$l9E&w9Q2b'_9R:Xt8M/a信息平台9p1^4R+q8d8@0g&t7c:k27.CSS透明IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)FireFox：opacity:0.6*f)Z5J)v6