js在IE和Firefox不同之處

js在IE和Firefox不同之處做Web類工程，不可防止的要涉及瀏覽器的兼容性問題，特別是javascript的兼容性問題，典型代表就是IE瀏覽器和FireFox瀏覽器，了解到不同之處就可以防止出現(xiàn)使用不同瀏覽器時(shí)可能會(huì)出現(xiàn)的兼容性問題，找了一些關(guān)于js在IE和FireFox中區(qū)別的資料，以供參考。oa.headware:88884m-P1P;@"w4Z*m

1.document.form.item問題

問題：信息平臺(tái)(w$\;{!H%d-m!K*K

現(xiàn)有代碼中存在許多document.formName.item("itemName")這樣的語(yǔ)句，不能在Firefox下運(yùn)行7^0R6s$}3x7J*b+J0_

解決方法：

統(tǒng)一使用document.formName.elements["elementName"]

1])]%d$k8M

2.集合類對(duì)象問題

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

IE下,可以使用()或[]獲取集合類對(duì)象；Firefox下，只能使用[]獲取集合類對(duì)象;o!?'v$W)n;j

解決方法：

改用[]作為下標(biāo)運(yùn)算。如：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下運(yùn)行,而不能在Firefox下運(yùn)行,這是因?yàn)镕irefox的event只能在事件發(fā)生的現(xiàn)場(chǎng)使用。

解決方法：

在IE中，不能把Event對(duì)象作為參數(shù)傳遞給事件處理程序，只能用window.event或者event來(lái)引用Event對(duì)象。-r#m2c#J5I-B(R

Firefox中獲取event的方法：信息平臺(tái)+V(~%~*O"F*[9U)V

(1)從HTML頁(yè)面?zhèn)鬟f參數(shù)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對(duì)象有x，y屬性，但是沒有pageX，pageY屬性；Firefox下，event對(duì)象有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與火狐中都有，具體意義有無(wú)差異尚未試驗(yàn)。

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

4.HTML對(duì)象的id作為對(duì)象名的問題'~%k0h,u5c;m*t9U

問題：

在IE中，HTML對(duì)象的ID可以作為document的下屬對(duì)象變量名直接使用，而在Firefox中不能。

解決方法：

統(tǒng)一用getElementById("idName")代替idName作為對(duì)象變量使用。

5.用idName字符串取得對(duì)象的問題oa.headware:8888)U%LC2m:W0C-p3_)p

問題：

在IE中，利用eval(idName)可以取得id為idName的HTML對(duì)象，而在Firefox中不能。8q%a%x,E5\/[&E/h8s$Y

解決方法：*R!D|8d,q7](M

統(tǒng)一使用getElementById(idName)代替eval(idName)信息平臺(tái)Ez+t2j9`,T)P#a

6.變量名與某HTML對(duì)象id相同的問題)p-bN,Q!_+E$r4j

問題：

IE中HTML對(duì)象的ID可以作為document的下屬對(duì)象變量名直接使用；而Firefox那么不能。在Firefox中，使用與HTML對(duì)象ID相同的變量名；IE下那么不能。

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

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

在聲明變量時(shí)，一律加上var，以防止歧義。oa.headware:8888L)L:M,V:|7W&{

此外，最好不要取與HTML對(duì)象id相同的變量名，以減少錯(cuò)誤。:?/t6L;i5C4V2x)_

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

8.frame問題

問題：!b1|$o&u%K;c#n(~'zn

在IE中可以用window.testFrame取得該frame，而Firefox中不行信息平臺(tái)#p3E)O%q&U*p

解決方法：%@#S9_%]'s/j!}

在frame的使用方面火狐和ie的最主要的區(qū)別是：)F;s;w1\;?2d

<framesrc="xx.htm"id="frameId"name="frameName"/>oa.headware:8888/c[1Q(]'q.K

IE可以通過id或者name訪問這個(gè)frame對(duì)應(yīng)的window對(duì)象

而Firefox只可以通過name來(lái)訪問這個(gè)frame對(duì)應(yīng)的window對(duì)象/C5q/w'w.I.H+K:s

如果上述frame標(biāo)簽寫在最上層的window里面的htm里面，那么可以這樣訪問

另外，在火狐和IE中都可以使用window.top.document.getElementById("frameId")來(lái)訪問frame標(biāo)簽

并且可以通過window.top.document.getElementById("testFrame").src='xx.htm'來(lái)切換frame的內(nèi)容信息平臺(tái)$cF,m&I4{

也都可以通過window.top.frameName.location='xx.htm'來(lái)切換frame的內(nèi)容

信息平臺(tái)0M'O.`c5s,oY#z'F'Q

9.在Firefox中，自己定義的屬性必須getAttribute()取得1v0C7l*R!M

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

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

}else{//Firefox下為dlg對(duì)象添加事件oa.headware:88886N6Y!t*[*?f*h%];z/O

dlg.setAttribute("onmousedown","move_Div(this);");0u0U4x!_*u

}

10.在Firefox中沒有parentElementchildren而用parentNodechildNodes4b$}"_3y;V6~

childNodes的下標(biāo)的含義在IE和Firefox中不同，F(xiàn)irefox使用DOM標(biāo)準(zhǔn)，childNodes中會(huì)插入空白文本節(jié)點(diǎn)firefox下childNodes會(huì)把換行和空白字符都算作父節(jié)點(diǎn)的子節(jié)點(diǎn),而ie的childNodes和children不會(huì)。,w+_$|"j*Y7k'V

一般可以通過node.getElementsByTagName()來(lái)回避這個(gè)問題。8z+U6o(R2?4N&o7k8v

當(dāng)html中節(jié)點(diǎn)缺失時(shí)，IE和Firefox對(duì)parentNode的解釋不同，例如6l)a#~&S0@

<form>;o5Q0i6T+['l#i4N.{%_

<table>0v;{*T5G#^+cj)h

<input/>

</table>

</form>

5t5]3f*p$G+\

Firefox中節(jié)點(diǎn)沒有removeNode方法，必須使用如下方法node.parentNode.removeChild(node)

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

11.const問題

問題:#n'r6S%O"O'M7M;?1S#n

在IE中不能使用const關(guān)鍵字。如constconstVar=32;在IE中這是語(yǔ)法錯(cuò)誤。信息平臺(tái)0~%Z8X1T#K2f

方法:

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

12.body對(duì)象

Firefox的body在body標(biāo)簽沒有被瀏覽器完全讀入之前就存在，而IE那么必須在body完全被讀入之后才存在

3h+l0]8L4Fw9u

13.urlencoding信息平臺(tái)3v&c2_.C$i(u8A

在JS中如果書寫url就直接寫&不要用&5G0t0c6H4b:x(u!\

如果varurl='xx.jsp?objectName=xx&objectEvent=xxx';2{3Ce5C:z$L8c6i

那么frm.action=url時(shí)，url很有可能不會(huì)被正常顯示以至于參數(shù)沒有正確的傳到效勞器，一般會(huì)效勞器報(bào)錯(cuò)參數(shù)沒有找到。-n.~0o/F*|"p9r;}/v

當(dāng)然在tpl中例外，因?yàn)閠pl中符合xml標(biāo)準(zhǔn)，要求&書寫為&信息平臺(tái)8`5d6\;|/?`

一般Firefox無(wú)法識(shí)別JS中的&

+~3J#B*~X0t/N9w/q8I

14.nodeName和tagName問題4p6w0]6?-O6?

問題：5y9S+D1@"C$C%R%R%_-O

在Firefox中，所有節(jié)點(diǎn)均有nodeName值，但textNode沒有tagName值。在IE中，nodeName的使用好象有問題。

解決方法：信息平臺(tái),R9~9K.W#I3K,S

使用tagName，但應(yīng)檢測(cè)其是否為空。

.U#@9^0d1n(h

信息平臺(tái)$N:Z$x#J)X(U/z

IE下input.type屬性為只讀，但是Firefox下可以修改信息平臺(tái)1p!c3b:l7f%W7[3z.^

16.document.getElementsByName()和document.all[name]的問題

問題：

在IE中，getElementsByName()、document.all[name]均不能用來(lái)取得div元素〔是否還有其它不能取的元素還不知道〕。:I$t6\&s"{!v#n

!B&c'@'`+j

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

問題:IE下，even對(duì)象有srcElement屬性，但是沒有target屬性；Firefox下，even對(duì)象有target屬性，但是沒有srcElement屬性。

問題:IE下，可以通過showModalDialog和showModelessDialog翻開模態(tài)和非模態(tài)窗口；Firefox下那么不能。

信息平臺(tái)0_;[3J#T,O/^

解決方法:直接使用window.open(pageURL,name,parameters)方式翻開新窗口。如果需要將子窗口中的參數(shù)傳遞回父窗口，可以在子窗口中使用window.opener來(lái)訪問父窗口。

例如：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()在這之前已被實(shí)現(xiàn)信息平臺(tái)+z*i+H4M%Y,^)j7T{'D

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

有人說(shuō)標(biāo)準(zhǔn)是：document.body.onload=newFunction('inject()');&fY-F&Z7X8c

20.firefox與IE(parentElement)的父元素的區(qū)別oa.headware:8888;?1x4U$~-c+o0H0t)b&F6Y"w

解決方法:因?yàn)閒irefox與IE都支持DOM，因此使用obj.parentNode是不錯(cuò)選擇。

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

Firefox不支持hand，但I(xiàn)E支持pointeroa.headware:8888)J!m0T;p,w

解決方法:統(tǒng)一使用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的語(yǔ)句無(wú)效oa.headware:88880P+R(m.Q1c5^:Q!q.t

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

24.IE,Firefox以及其它瀏覽器對(duì)于table標(biāo)簽的操作都各不相同，在ie中不允許對(duì)table和tr的innerHTML賦值，使用js增加一個(gè)tr時(shí)，使用appendChile方法也不管用。

解決方法：//向table追加一個(gè)空行

varrow=otable.insertRow(-1);

varcell=document.createElement("td");

cell.innerHTML="";

cell.className="XXXX";信息平臺(tái)+{1V)O8N8i#i)h

row.appendChild(cell);

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

FireFox無(wú)法解釋padding5px4px3px1px簡(jiǎn)寫，必須改成padding-top:5px;padding-right:4px;padding-bottom:3px;padding-left:1px;

信息平臺(tái)-x.j4P#A#V6N7b7o4D+f

26.消除ul、ol等列表的縮進(jìn)時(shí)

樣式應(yīng)寫成：list-style:none;margin:0px;padding:0px;8N:y4pP-y&n5s%X'G,_2h

其中margin屬性對(duì)IE有效，padding屬性對(duì)FireFox有效6_$l9E&w9Q2b'_9R:Xt8M/a

信息平臺(tái)9p1^4R+q8d8@0g&t7c:k

27.CSS透明

IE：filter