js在IE和Firefox不同之处

js在IE和Firefox不同之处做Web类工程，不可防止的要涉及浏览器的兼容性问题，特别是javascript的兼容性问题，典型代表就是IE浏览器和FireFox浏览器，了解到不同之处就可以防止出现使用不同浏览器时可能会出现的兼容性问题，找了一些关于js在IE和FireFox中区别的资料，以供参考。oa.headware:88884m-P1P;@"w4Z*m

1.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$k8M

2.集合类对象问题

问题：*o!W-c+]3HI3|#y*a0N7`.O

IE下,可以使用()或[]获取集合类对象；Firefox下，只能使用[]获取集合类对象;o!?'v$W)n;j

解决方法：

改用[]作为下标运算。如：document.forms("formName")改为document.forms["formName"]

又如：document.getElementsByName("inputName")(1)改为document.getElementsByName("inputName")[1]

&H$O+v:`,Wo3~$m0K

3.event)o"a(F1k"nZ#w#@

获取event问题：4PC:r9v)Ls&v!U

window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。

解决方法：

在IE中，不能把Event对象作为参数传递给事件处理程序，只能用window.event或者event来引用Event对象。-r#m2c#J5I-B(R

Firefox中获取event的方法：信息平台+V(~%~*O"F*[9U)V

(1)从HTML页面传递参数event(2)event=arguments.callee.caller.arguments[0];,I"s-`4e4|5o*Q;Gy

functiongetEvent(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,J6E

解决方法：event.x=event.x?event.x:event.pageX;3P7`&f8_3D,k,Y4^4W8t8Y

其它：#C2K2V(B6H"^

event.layerX在IE与火狐中都有，具体意义有无差异尚未试验。

3t/k,r"d1`/S;y0p

4.HTML对象的id作为对象名的问题'~%k0h,u5c;m*t9U

问题：

在IE中，HTML对象的ID可以作为document的下属对象变量名直接使用，而在Firefox中不能。

解决方法：

统一用getElementById("idName")代替idName作为对象变量使用。

5.用idName字符串取得对象的问题oa.headware: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#a

6.变量名与某HTML对象id相同的问题)p-bN,Q!_+E$r4j

问题：

IE中HTML对象的ID可以作为document的下属对象变量名直接使用；而Firefox那么不能。在Firefox中，使用与HTML对象ID相同的变量名；IE下那么不能。

解决方法：6c&v&~0F(D8N(^:A

1y:A'|8~7y%X#a

在声明变量时，一律加上var，以防止歧义。oa.headware:8888L)L:M,V:|7W&{

此外，最好不要取与HTML对象id相同的变量名，以减少错误。:?/t6L;i5C4V2x)_

%|;\8b.v%d0Z%w

8.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"/>oa.headware:8888/c[1Q(]'q.K

IE可以通过id或者name访问这个frame对应的window对象

而Firefox只可以通过name来访问这个frame对应的window对象/C5q/w'w.I.H+K:s

如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问

另外，在火狐和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'Q

9.在Firefox中，自己定义的属性必须getAttribute()取得1v0C7l*R!M

if(document.all){//IE下为dlg对象添加事件9S/O)i:]#s+n$D%X'Z:T

dlg.setAttribute("onmousedown",function(){move_Div(this);});

}else{//Firefox下为dlg对象添加事件oa.headware:88886N6Y!t*[*?f*h%];z/O

dlg.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>

5t5]3f*p$G+\

Firefox中节点没有removeNode方法，必须使用如下方法node.parentNode.removeChild(node)

oa.headware:88882r2F9C+t%@$y"h2L

11.const问题

问题:#n'r6S%O"O'M7M;?1S#n

在IE中不能使用const关键字。如constconstVar=32;在IE中这是语法错误。信息平台0~%Z8X1T#K2f

方法:

不使用const，以var代替。oa.headware:88887W4y$P0O8T4m){;U2Y#J;O

12.body对象

Firefox的body在body标签没有被浏览器完全读入之前就存在，而IE那么必须在body完全被读入之后才存在

3h+l0]8L4Fw9u

13.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/q8I

14.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(h

信息平台$N:Z$x#J)X(U/z

IE下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'@'`+j

6M.@0p9u9D-B#b"C.R

问题:IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。

问题:IE下，可以通过showModalDialog和showModelessDialog翻开模态和非模态窗口；Firefox下那么不能。

信息平台0_;[3J#T,O/^

解决方法:直接使用window.open(pageURL,name,parameters)方式翻开新窗口。如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口。

例如：varparentWin=window.opener;+o.h%b5J9|$X

parentWin.document.getElementById("Aqing").value="Aqing";

/j"d/g#?"n7a$[)u3ik

19.事件委托方法J)CV1L)\!h8_

IE：document.body.onload=inject;//Functioninject()在这之前已被实现信息平台+z*i+H4M%Y,^)j7T{'D

Firefox：document.body.onload=inject();

有人说标准是：document.body.onload=newFunction('inject()');&fY-F&Z7X8c

20.firefox与IE(parentElement)的父元素的区别oa.headware:8888;?1x4U$~-c+o0H0t)b&F6Y"w

解决方法:因为firefox与IE都支持DOM，因此使用obj.parentNode是不错选择。

21.cursor:handVScursor:pointeroa.headware:8888$U(k!O(o-u'U)y5d*O-K,O

Firefox不支持hand，但IE支持pointeroa.headware:8888)J!m0T;p,w

解决方法:统一使用pointer0{'e-u6R%i6m

22.innerText在IE中能正常工作，但是innerText在FireFox中却不行.*?$E+Q%A#?

解决方法:7t*^8G$y6M(i1w

if(navigator.appName.indexOf("Explorer")>-1){~(J&p*Z+`5y+@3r/K1a

document.getElementById('element').innerText="mytext";

}else{

document.getElementById('element').textContent="mytext";!V1?2b3}2}9r+]$H

}

*d1y"\;c&b"t

23.FireFox中类似obj.style.height=imgObj.height的语句无效oa.headware:88880P+R(m.Q1c5^:Q!q.t

解决方法：obj.style.height=imgObj.height+'px';oa.headware:8888:[*IW%}8s1Z2V)c

24.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)h

row.appendChild(cell);

25.padding问题oa.headware:8888&^!H)j;x%e3e!M

FireFox无法解释padding5px4px3px1px简写，必须改成padding-top:5px;padding-right:4px;padding-bottom:3px;padding-left:1px;

信息平台-x.j4P#A#V6N7b7o4D+f

26.消除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:k

27.CSS透明

IE：filter