js在IE和Firefox不同之处.docx

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

* M; I- Y3 [( e& G* r) P/ }5 A1 L: :88881. document.form.item 问题
9 Q3 A9 F1 o8 Q+ @/ m5 q问题：信息平台( w$ \; {! H% d- m! K* K
现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在Firefox下运行7 ^0 R6 s$ }3 x7 J* b+ J0 _
解决方法：
3 E7 H1 I x1 R, o5 i统一使用 document.formName.elements["elementName"]
/ r {9 o; p7 s# u& O1 ]) ]% d$ k8 M
2. 集合类对象问题
p, W' h; q0 f0 C2 t9 Z:8888问题：* o! W- c+ ]3 H I3 |# y* a0 N7 `. O
IE下,可以使用()或[]获取集合类对象；Firefox下，只能使用[]获取集合类对象 ; o! ?' v$ W) n; j
解决方法：
9 ~# S/ `( X1 N: A+ v7 k改用[ ]作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]
" O. P$ \% o; h/ X3 v又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
0 m5 V8 F: f9 y o8 a" {7 v& H$ O+ v: `, W o3 ~$ m0 K
3. event) o" a( F1 k" n Z# w# @
获取event问题：4 P C: r9 v) L s& v! U
window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。
& c' [& p( i4 s2 p1 d信息平台解决方法：
6 ]4 p* w+ P. I6 F, ?3 }在IE中，不能把Event对象作为参数传递给事件处理程序，只能用window.event或者event来引用Event对象。- r# m2 c# J5 I- B( R
Firefox中获取event的方法：信息平台+ V( ~% ~* O" F* [9 U) V
(1) 从HTML页面传递参数event (2) event = arguments.callee.caller.arguments[0];, I" s- `4 e4 |5 o* Q; G y
function getEvent(evt) { evt=evt?evt:(window.event?window.event:null); }
$ }- }5 B H& z Qevent属性问题：
! C8 i, x0 V( }5 Z1 fIE下，event对象有x，y属性，但是没有pageX，pageY属性；Firefox下，event对象有pageX，pageY属性，但是没有x，y属性。* Y3 c5 p5 x) C5 q- {6 Z, J6 E
Firefox中的event.pageX相当于IE中的event.x
1 D* e6 G: [7 \' ?解决方法：event.x = event.x ? event.x : event.pageX;3 P7 `& f8 _3 D, k, Y4 ^4 W8 t8 Y
其它：# C2 K2 V( B6 H" ^
event.layerX 在IE与火狐中都有，具体意义有无差别尚未试验。
2 q; \% W4 ~' n4 @3 t/ k, r" d1 `/ S; y0 p
4. HTML 对象的 id 作为对象名的问题' ~% k0 h, u5 c; m* t9 U
问题：
! v8 N+ c/ P* ]& c- X在IE中，HTML对象的ID可以作为document的下属对象变量名直接使用，而在Firefox中不能。
* h5 B+ o( M4 ~. `9 Z1 m解决方法：
1 U# X" K/ ^! o T& M9 B5 J统一用 getElementById("idName") 代替 idName 作为对象变量使用。
q& j0 e) d& O
! W, d' x/ H! b, y/ @5. 用idName字符串取得对象的问题:8888) U% L C2 m: W0 C- p3 _) p
问题：
0 B5 O) I$ ?$ M3 C- E m' w1 :8888在IE中，利用eval(idName)可以取得id为idName的HTML对象，而在Firefox中不能。8 q% a% x, E5 \/ [& E/ h8 s$ Y
解决方法：* R! D |8 d, q7 ]( M
统一使用 getElementById(idName) 代替 eval(idName)信息平台 E z+ t2 j9 `, T) P# a

/ Z, J! d$ s* F1 N* R4 O9 P6. 变量名与某 HTML 对象 id 相同的问题) p- b N, Q! _+ E$ r4 j
问题：
5 D, y5 h2 [! F+ x) m- [' s: SIE中HTML对象的ID可以作为document的下属对象变量名直接使用；而Firefox则不能。在Firefox中，使用与HTML对象ID相同的变量名；IE下则不能。
; ]- T6 i- o5 L信息平台解决方法：6 c& v& ~0 F( D8 N( ^: A
统一使用使用document.getElementById("idName")代替document.idName1 y: A' |8 ~7 y% X# a
在声明变量时，一律加上 var ，以避免歧义。:8888 L) L: M, V: |7 W& {
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。: ?/ t6 L; i5 C4 V2 x) _
% |; \8 b. v% d0 Z% w
8. frame问题
, l9 Y. Z5 Q7 w) c问题：! b1 |$ o& u% K; c# n( ~' z n
在 IE中 可以用window.testFrame取得该frame，而Firefox中不行信息平台# p3 E) O% q& U* p
解决方法：% @# S9 _% ]' s/ j! }
在frame的使用方面火狐和ie的最主要的区别是：) F; s; w1 \; ?2 d
<frame src="xx.htm" id="frameId" name="frameName" />:8888/ c [1 Q( ]' q. K
IE可以通过id或者name访问这个frame对应的window对象
& k* Y* p: x' o. r而Firefox只可以通过name来访问这个frame对应的window对象/ C5 q/ w' w. I. H+ K: s
如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
% }: e" }0 p9 k, K:8888IE：window.top.frameId或者window.top.frameName来访问这个window对象
% f$ U9 d: {% d) [ e3 }' i信息平台Firefox：只能这样window.top.frameName来访问这个window对象
* n7 G k$ K* ~6 W6 f2 |! N3 I/ ?信息平台另外，在火狐和IE中都可以使用window.top.document.getElementById("frameId")来访问frame标签
+ }7 ~7 H% m, a; z并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容信息平台$ c F, m& I4 {
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
6 J- `6 ~0 [/ \/ r信息平台0 M' O. ` c5 s, o Y# z' F' Q
9. 在Firefox中，自己定义的属性必须getAttribute()取得1 v0 C7 l* R! M
if(document.all){ //IE下为dlg对象添加事件9 S/ O) i: ]# s+ n$ D% X' Z: T
dlg.setAttribute("onmousedown", function(){ move_Div(this); });
' Q, \# h. w3 n+ e" X4 _& o8 \4 r2 k }else{ //Firefox下为dlg对象添加事件:88886 N6 Y! t* [* ? f* h% ]; z/ O
dlg.setAttribute("onmousedown", "move_Div(this);");0 u0 U4 x! _* u
}
2 Y6 ~2 q7 H) J10.在Firefox中没有 parentElement children 而用 parentNode childNodes4 b$ }" _3 y; V6 ~
childNodes的下标的含义在IE和Firefox中不同，Firefox使用DOM规范，childNodes中会插入空白文本节点 ---- firefox下childNodes会把换行和空白字符都算作父节点的子节点,而ie的childNodes和children不会。, w+ _$ |" j* Y7 k' V
一般可以通过node.getElementsByTagName()来回避这个问题。8 z+ U6 o( R2 ?4 N& o7 k8 v
当html中节点缺失时，IE和Firefox对parentNode的解释不同，例如6 l) a# ~& S0 @
<form>; o5 Q0 i6 T+ [' l# i4 N. {% _
<table>0 v; {* T5 G# ^+ c j) h
<input/>
# U) _9 m; S( Z) y </table>
0 N( w) V2 [3 ]信息平台</form>
6 S6 z6 u+ l7 j5 u" p信息平台Firefox中input.parentNode的值为form, 而IE中input.parentNode的值为空节点5 t5 ]3 f* p$ G+ \
Firefox中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
( D+ B+ a; _" Y2 O8 B:88882 r2 F9 C+ t% @$ y" h2 L
11.const 问题
0 b* }0 f" L1 R8 r1 O# { H, B问题:# n' r6 S% O" O' M7 M; ?1 S# n
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。信息平台0 ~% Z8 X1 T# K2 f
方法:
# C" L l, v1 M1 ^# o信息平台不使用 const ，以 var 代替。:88887 W4 y$ P0 O8 T4 m) {; U2 Y# J; O

* V& h- C! s/ J' k9 E/ F' X12. body 对象
4 V$ K5 |1 p p, T1 U9 @7 TFirefox的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在
1 `: \! s9 e$ \& }! {2 :88883 h+ l0 ]8 L4 F w9 u
13. url encoding信息平台3 v& c2 _. C$ i( u8 A
在JS中如果书写url就直接写&不要用& 5 G0 t0 c6 H4 b: x( u! \
如果 var url = 'xx.jsp?objectName=xx&objectEvent=xxx';2 {3 C e5 C: z$ L8 c6 i
那么frm.action = url时，url很有可能不会被正常显示以至于参数没有正确的传到服务器，一般会服务器报错参数没有找到。- n. ~0 o/ F* |" p9 r; }/ v
当然在tpl中例外，因为tpl中符合xml规范，要求&书写为&信息平台8 `5 d6 \; |/ ? `
一般Firefox无法识别JS中的&
$ H' ~; B" q. L# G g+ ~3 J# B* ~ X0 t/ N9 w/ q8 I
14. nodeName 和 tagName 问题4 p6 w0 ]6 ?- O6 ?
问题：5 y9 S+ D1 @" C$ C% R% R% _- O
在Firefox中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象有问题。
7 [0 Q# B' D: h解决方法：信息平台, R9 ~9 K. W# I3 K, S
使用 tagName，但应检测其是否为空。
) t! n- A: i, i* Z" U W. U# @9 ^0 d1 n( h
15. input.type属性问题信息平台$ N: Z$ x# J) X( U/ z
IE下 input.type属性为只读，但是Firefox下可以修改信息平台1 p! c3 b: l7 f% W7 [3 z. ^

9 Z) B; B# j, v16. document.getElementsByName() 和 document.all[name] 的问题
8 q; S. N. P, _- R:8888问题：
; @4 f+ o g) l: N4 ~; w! R信息平台在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。: I$ t6 \& s" {! v# n
! B& c' @' `+ j
17.event.srcElement问题6 M. @0 p9 u9 D- B# b" C. R
问题:IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
* }: b3 h( z4 X; u" J
1 d! U- y5 b- t1 W& H:8888解决方法：使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target
2 }0 o c9 r8 t) Q! ?9 n
9 [. \1 L; V; F( a, z18.模态和非模态窗口问题
( O3 @* u0 ]& w, f 问题:IE下，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；Firefox下则不能。
4 A( @& m, s) V信息平台0 _; [3 J# T, O/ ^
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口。
3 V) ?7 E3 I0 S# Y r& B( z3 ~* f# k3 L例如：var parentWin = window.opener;+ o. h% b5 J9 |$ X
parentWin.document.getElementById("Aqing").value = "Aqing";
; `1 }( X1 v5 T7 l9 i/ j" d/ g# ?" n7 a$ [) u3 i k
19. 事件委托方法 J) C V1 L) \! h8 _
IE：document.body.onload = inject; //Function inject()在这之前已被实现信息平台+ z* i+ H4 M% Y, ^) j7 T {' D
Firefox：document.body.onload = inject();
! z+ m* j5 Z$ r. b# g0 L7 I信息平台 有人说标准是：document.body.onload=new Function('inject()');& f Y- F& Z7 X8 c

2 }2 G" h l2 \: S20. firefox与IE(parentElement)的父元素的区别:8888; ?1 x4 U$ ~- c+ o0 H0 t) b& F6 Y" w
IE：obj.parentElement
. g3 m% ^: t4 t7 `, Z! T H, W) V' b firefox：obj.parentNode
7 n, m; q: e5 H+ D/ ?4 h 解决方法: 因为firefox与IE都支持DOM，因此使用obj.parentNode是不错选择。
0 C/ {0 Z5 M. v2 l
1 `" y% i9 i! x- `21.cursor:hand VS cursor::8888$ U( k! O( o- u' U) y5 d* O- K, O
Firefox不支持hand，但IE支持:8888) J! m0 T; p, w
解决方法: 统一使用pointer0 {' e- u6 R% i6 m

4 S" h- C! K' r信息平台22.innerText在IE中能正常工作，但是innerText在FireFox中却不行.* ?$ E+ Q% A# ?
解决方法:7 t* ^8 G$ y6 M( i1 w
if(navigator.appName.indexOf("Explorer") > -1){ ~( J& p* Z+ `5 y+ @3 r/ K1 a
document.getElementById('element').innerText = "my text";
. j) M5 @5 U' R7 R$ u2 `:8888 } else{
/ V& H7 j) f9 i7 Z1 v document.getElementById('element').textContent = "my text";! V1 ?2 b3 }2 }9 r+ ]$ H
}
) y% B0 n( v& i8 L( w$ q* d1 y" \; c& b" t
23. FireFox中类似 obj.style.height = imgObj.height 的语句无效:88880 P+ R( m. Q1 c5 ^: Q! q. t
解决方法：obj.style.height = imgObj.height + 'px';:8888: [* I W% }8 s1 Z2 V) c

3 H/ c( I% W, R* G:888824. IE,Firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用。
0 m9 r7 v1 L2 M$ E K信息平台 解决方法： //向table追加一个空行
6 _5 D: U( ]. M! I( j7 M; b+ C var row = otable.insertRow(-1);
" z2 C) x, S6 b$ K" l9 z3 C var cell = document.createElement("td");
5 ?7 @0 m9 q& Z cell.innerHTML = " ";
$ G0 A5 q) G; S t# t' _( T! l cell.className = "XXXX";信息平台+ {1 V) O8 N8 i# i) h
row.appendChild(cell);
" J/ v) e0 i, k v0 h
m1 P( P" O u+ g25. padding 问题:8888& ^! H) j; x% e3 e! M
FireFox无法解释padding 5px 4px 3px 1px 简写，必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
7 J, ?9 L0 N6 F' E:8888信息平台- x. j4 P# A# V6 N7 b7 o4 D+ f
26. 消除ul、ol等列表的缩进时
- ]6 Z; l' g3 o" l5 r% | 样式应写成：list-style:none;margin:0px;padding:0px;8 N: y4 p P- y& n5 s% X' G, _2 h
其中margin属性对IE有效，padding属性对FireFox有效6 _$ l9 E& w9 Q2 b' _9 R: X t8 M/ a
信息平台9 p1 ^4 R+ q8 d8 @0 g& t7 c: k
27. CSS透明
* L, C' m' Q C) i, X IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
: D; h, x+ f/ :8888 FireFox：opacity:0.6
' h, |+ q6 W1 k3 ?5 ~' |* k; _* f) Z5 J) v6 h, `- y
28. CSS圆角% h. Y7 q. I; e# \, s) v
IE：不支持圆角。
/ J. M, k* a7 U; n+ `; @" b0 V FireFox： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;, V4 { N* u2 ^- W6 F4 r

8 C2 |- u$ l9 i9 ~% z29. CSS双线凹凸边框$ U f8 ]$ _/ U' e4 O) U5 Z' N
IE：border:2px outset;
w' c+ @1 S' Y$ S: m' i FireFox：-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;( B0 @# A1 t$ i# }

. ?- X E( F/ e0 G% H' K1 w30.window.location.href问题
( t( `; l. W' _5 \. O 问题：IE或者Firefox2.0.x下，可以使用window.location或window.location.href;Firefox1.5.x下，只能使用:88881 n1 H0 u( R5 d/ ]" i
9 X1 p* W$ A( P. J4 }/ M
解决方法：使用window.location来代替window.location.href
; m K4 } `& n1 p+ N& A9 Y5 n/ m
31.模态窗口关闭2 s$ s. c# B5 X0 c& d/ J
问题：FireFox不支持window.close():8888( C2 f9 z& Y( ~; E
解决办法：使用window.top.close()