[轉貼] IE和Firefox在JavaScript方面的兼容性
1.document.formName.item("itemName") 問題
: n C; l, }/ f$ Q V) N# P$ |* |0 e& A9 X6 w: n6 b
說明:IE 下,可以使用document.formName.item("itemName")或document.formName.elements ["elementName"];Firefox下,只能使用document.formName.elements["elementName"].0 c+ z3 l& J" {2 r
解決方法:統一使用document.formName.elements["elementName"]. Text1:
( |' F" v7 E2 R( [+ ?2 }6 vdocument.formName.item("itemName")7 V: j5 v" X% I) s( {
document.formName.elements["elementName"]' T1 V5 G; m7 `3 I7 ]: ]
. }$ Z/ `8 R, Z: Q* n6 L1 f/ K3 k-------------------------------------------------, r% ], ~% k- T7 S0 T6 ?$ E
2.集合類對象問題6 ^- G# S! J0 O3 Q/ x
( z+ Y- v3 i/ D& m/ T! c
說明:IE下,可以使用()或[]獲取集合類對象;Firefox下,只能使用[]獲取集合類對象.
8 Y# X7 Z- r u; k5 Q W* J解決方法:統一使用[]獲取集合類對象.6 {9 N6 V0 n8 M0 [+ y
Text2:- m& P8 R% e5 n) p' K7 {
document.forms("formName")' c+ p' i/ ~2 H$ y* y' e
document.forms["formName"]: ?1 r/ [- j# u
; c$ M, b4 F) _
Text3:
& T2 R; @" d( l7 m) @document.getElementsByName("inputName")(0)
; u* s- d! u* b2 j; Q4 Pdocument.getElementsByName("inputName")[0]
- Q% X" f$ O o# o: g' A
$ |1 p) n/ }* `- P9 @! w-------------------------------------------------' a+ ]" b$ r) K, `( [ [) Y. W
3.自定義屬性問題
+ j9 \! C) w) f8 x* T- ^2 E( e
& D" n, i& r+ w7 L4 W) v) K說明:IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性.
8 y$ u0 z7 B% e/ C, I( g5 D2 n6 k解決方法:統一通過getAttribute()獲取自定義屬性.! [9 Y& [) j D2 K( Q
Text4:/ G L6 S8 E" z& [, R% o" v
直接獲取自定義屬性的值0 {7 b# C+ `0 S- }
通過getAttribute()獲取自定義屬性的值0 Q7 B- Y5 y Q8 \. A; @$ X
' g* ?- K& z8 I& \
-------------------------------------------------
5 A# w/ o: z, v! D. ^4.eval("idName")問題$ C1 ^, s8 r) F- L2 X7 _7 P
5 c- E. |8 L; z d* r說明:IE下,,可以使用eval("idName")或getElementById("idName")來取得id為idName的HTML對象;Firefox下只能使用getElementById("idName")來取得id為idName的HTML對象./ Y# \" L7 A" T9 A o2 N5 N
解決方法:統一用getElementById("idName")來取得id為idName的HTML對象.! v$ S. K; E3 D
Text5:/ ]& T8 w$ d& J* ]( m
eval("idName")
6 L, T. o+ N/ Q) ?. E" q' M. jdocument.getElementById("itemId")
+ e5 B( v! s9 @9 ~# \1 J: M9 i
7 u1 b. P9 ] V) c$ Z4 ?-------------------------------------------------2 \9 Y, L+ p' E/ D+ O; E% k
5.變量名與某HTML對象ID相同的問題
" E7 O2 M) v8 k& U) w' L6 F2 H: j& n$ |5 d' \' R7 }: F7 W
說明:IE下,HTML對象的ID可以作為document的下屬對象變量名直接使用;Firefox下則不能.Firefox下,可以使用與HTML對象ID相同的變量名;IE下則不能。
7 w) W* Q9 X6 N2 {' K解決方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML對象ID相同的變量名,以減少錯誤;在聲明變量時,一律加上var,以避免歧義.8 U( u3 C6 c. }" J9 ~3 I) x
8 s2 O6 L% U5 b9 q1 r7 {9 U2 |
-------------------------------------------------5 d0 H- W/ H+ k
6.const問題
, \1 O: l( L/ {. Y1 j" z" W5 @2 a, H0 Q( W4 S# q- G
說明:Firefox下,可以使用const關鍵字或var關鍵字來定義常量;IE下,只能使用var關鍵字來定義常量., t3 y9 g j( i( i
解決方法:統一使用var關鍵字來定義常量.
* H6 [* x) V' q6 }+ }3 G3 k
; D1 o4 t+ N' n( B- L-------------------------------------------------5 {" A4 f, a1 o; }. _: K
7.input.type屬性問題
9 I% }% G3 ]6 V6 ?: J/ d+ M6 w
' W V2 q' v8 m3 K說明:IE下input.type屬性為只讀;但是Firefox下input.type屬性為讀寫.+ y+ C- s+ Y9 o A& P
) n7 s7 Y# Y2 c* g: p
-------------------------------------------------
& N* o9 \* {9 u+ Y; T8.window.event問題
% w. G: ^; ` p4 o, \1 s/ ^7 m! Q- m* X$ S8 T# |2 ?8 @
說明:window.event只能在IE下運行,而不能在Firefox下運行,這是因為Firefox的event只能在事件發生的現場使用.6 G$ u: Y: [ Y( {
解決方法:
( s2 L" o; V$ A" KIE:) U) q) e; _; \% T0 i4 f2 M
<input name="Button8_1" type="button" value="IE" />
# \3 E6 q+ m% d. K/ Q6 O* T4 Q...# W7 C4 I! w9 _
<script language="javascript">) ?" A: c1 v& Y
function gotoSubmit8_1() {, r* g; H7 U& h- d9 F- u# m0 B2 [/ t
...
; c M1 ^ ~+ ]7 S falert(window.event); //use window.event9 D+ ]/ f! I1 f& N& u9 s
...
; Q+ p* s% K8 f+ G( U4 B. e}/ f9 I7 z X$ b' ?' N A# W
</script>- R" r# K) N! Q$ k
IE&Firefox:
7 L! V1 f5 ~1 _: ^, J<input name="Button8_2" type="button" value="IE" />6 F0 E6 Z" n8 z+ n! b
...) h0 Q$ J5 K% R! m
<script language="javascript">- m' l A$ i- C* u( m1 k, T4 Y- x
function gotoSubmit8_2(evt) {
0 B0 O) M- C& x# ?...
* k7 u' B6 T) Levt=evt?evt:(window.event?window.event:null);( \) w0 {) W* m( r& c' m3 A5 I
alert(evt); //use evt9 k5 G7 K8 D3 l% {- q- Y4 D2 @0 X) L- L
...
9 K9 v* J, V Y- v; `) w% y* l}
' M- o2 b; L, `* U1 b5 ^</script>; a3 ?. ?6 `! z2 ?
" o1 n: ]# F5 s! j-------------------------------------------------/ e0 f, u- B- f2 t4 {; M
9.event.x與event.y問題- F. a$ ?3 a" u& Z8 a
9 q7 W+ ~0 K" R! E c% u說明:IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,even對象有pageX,pageY屬性,但是沒有x,y屬性.
3 [: Q4 W; m: ^* _" c解決方法:使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX.
+ j: y. x! v7 X. \7 [3 e( C
; H5 T4 K$ t/ p ]: A6 x-------------------------------------------------
5 k. K/ F# X5 i$ _4 F! M4 ^' Q% g0 J10.event.srcElement問題
( R- y4 T P$ i' X' H: \
" G- C6 Y& S7 x$ T/ h9 _% d9 k說明:IE下,even對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性. G5 T' f( B' h: r6 y, z
解決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來代替IE下的event.srcElement或者Firefox下的event.target.
, l a6 H' i" F" [( {4 Y
; c2 t4 W j' p# _5 y+ I8 Y-------------------------------------------------
/ j; J" I& u$ b! G2 F: P8 e. ?( i11.window.location.href問題
% D) C4 A" F1 R1 Z8 h: N8 |# v, E6 t
7 g5 j: E/ e# U2 Z說明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
; M3 K& v; [/ l/ K- b. Q解決方法:使用window.location來代替window.location.href.' h+ X8 v$ ]- S& J) r
7 Q# o! Q2 z- A Q, w0 @2 @3 ~/ g( ]
-------------------------------------------------
; h! e3 t/ C/ j; |% O+ u+ \% L& ?/ R1 B( \* m
12.模態和非模態窗口問題6 o! l# d# p* I
; ?# [7 x/ B& D& M* R
說明:IE下,可以通過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能.
: t& D7 }) T" ? o解決方法:直接使用window.open(pageURL,name,parameters)方式打開新窗口。
# G/ v! p9 t% `2 t B0 v6 V1 O; t% _2 S& _
如果需要將子窗口中的參數傳遞迴父窗口,可以在子窗口中使用window.opener來訪問父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
6 K2 | a' d5 d/ J) I9 p
" U. t T, i' F8 n% V, O6 p-------------------------------------------------
4 `) V6 R# j7 ]: j1 m13.frame問題 }- B# L f8 p' y& R! ?
' a0 V. g1 T% ]4 l8 g. e以下面的frame為例：
4 O0 t" ^; D# C<frame src="xxx.html" id="frameId" name="frameName" />
7 m- @9 g' \& i# ?1 o5 c u
0 }' A1 ~) _: n4 ]: ~, K(1)訪問frame對象:2 |6 |' h# |% S; U* k h3 W% j+ j
IE:使用window.frameId或者window.frameName來訪問這個frame對象.
- J! {: b/ \" L! AFirefox:只能使用window.frameName來訪問這個frame對象.
/ }" O e& l& W另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")來訪問這個frame對象. U) e0 N- @3 V, R1 q; |
$ s( b' R6 x' H+ f
(2)切換frame內容:
' R V v1 w9 o# N6 I8 T) V在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的內容.) k% H3 H- C7 t3 o7 D4 q4 {
. w- t9 u* X: M: R* `. d, @如果需要將frame中的參數傳回父窗口，可以在frme中使用parent來訪問父窗口。例如：parent.document.form1.filename.value="Aqing";
5 U0 P! I3 U; z( d
9 ]" B5 l& n) C" }2 z4 W. ?9 `! ?! y3 D-------------------------------------------------1 `) ~4 h4 o5 ]. d/ K! p% z$ k
14.body問題) Z T4 W& A2 D
# e6 O% r4 w8 R" G9 W* X/ O
Firefox的body在body標籤沒有被瀏覽器完全讀入之前就存在；而IE的body則必須在body標籤被瀏覽器完全讀入之後才存在.$ P5 z* L, c, @* ^$ ?8 H( K
9 Y! j, N/ F" V; ]- u( K+ C例如：
& c( L; |7 ~7 a% _, ]: IFirefox：
; h0 D, A0 y1 s; `<body>
( G; S8 M+ f9 e: Z<script type="text/javascript">/ V4 q0 ~6 ~7 h c; E. d
document.body.onclick = function(evt){! H3 C" X3 k6 P9 U2 Z; r9 \
evt = evt, P3 ^2 W% T3 e, F$ V' A$ R7 O3 }
window.event;
1 `9 _# V5 s/ p m( ualert(evt);
/ o* `" p9 B* A/ ?}6 g# C( r3 C! B
</script>
; ~$ k, V2 r9 m+ `* H</body>
' @( c& L" q( \& q8 G) aIE&Firefox：
5 U7 T5 \' g! s( Z# U. {% I5 j<body>
, l2 }: V9 p" o3 i8 P& O) j6 D</body>
1 H+ L) x" `( `! i4 q: [% j# j" u<script type="text/javascript">
, @3 P& p2 U& q ~' cdocument.body.onclick = function(evt){! s" @5 k0 Y; h3 T
evt = evt
* z" E* l& Y7 @" ~; cwindow.event;4 |: o9 F; B1 v$ h- T
alert(evt);
! C, n' ]: V, M k' l4 f}; x# X4 N- p L8 b4 n
</script>
搜索更多相關主題的帖子:
Firefox Javascript 兼容
