Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to solve the difference between JS in firefox and IE, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand.

Differences and Solutions of JS under firefox and IE

1.document.formName.item (itemName) problem

Description:

Under IE, you can use document.formName.item (itemName) or document.formName.elements[ elementName]

Under Firefox, you can only use document. FormName.elements [elementName].

Solution: unify the use of document.formName.elements[ elementName].

two。 Set class object problem

Note: under IE, you can use () or [] to get collection objects; under Firefox, you can only use [] to get collection objects.

Solution: uniformly use [] to get collection class objects.

3. Custom attribute problem

Description: under IE, you can use the method of getting general attributes to get custom attributes, or you can use getAttribute () to obtain custom attributes; under Firefox, you can only use getAttribute () to get custom attributes.

Solution: get custom attributes uniformly through getAttribute ().

4.eval (idName) problem

Note: under IE, you can use eval (idName) or getElementById (idName) to get the HTML object whose id is idName; under Firefox, you can only use getElementById (idName) to get the HTML object whose id is idName.

Solution: uniformly use getElementById (idName) to obtain the HTML object whose id is idName.

5. The problem that the variable name is the same as a HTML object ID

Note: under IE, the ID of HTML object can be used directly as a subordinate object variable name of document; under Firefox, you can use the same variable name as HTML object ID; under Firefox, you can use the same variable name; IE cannot.

Solution: use document.getElementById (idName) instead of document.idName.*** do not take the same variable name of the HTML object ID to reduce errors; when declaring variables, always add var to avoid ambiguity.

6.const problem

Note: under Firefox, you can use the const keyword or var keyword to define constants; under IE, you can only use the var keyword to define constants.

Solution: uniformly use the var keyword to define constants.

7.input.type attribute problem

Note: the input.type attribute under IE is read-only, but the input.type attribute under Firefox is read-write.

8.window.event problem

Note: window.event can only be run under IE, but not under Firefox, because Firefox's event can only be used at the scene of an event.

Solution:

IE:

... FunctiongotoSubmit8_1 () {... Alert (window.event); / / usewindow.event...} IE&Firefox:... FunctiongotoSubmit8_2 (evt) {... Evtevt=evt?evt: (window.event?window.event:null); alert (evt); / / useevt.}

9.event.x and event.y problem

Description: under IE, the even object has the XMagy attribute, but no pageX,pageY attribute; under Firefox, the even object has the pageX,pageY attribute, but no XMagy attribute.

Solution: use mX (mX=event.x?event.x:event.pageX;) instead of event.x under IE or event.pageX under Firefox.

10.event.srcElement problem

Description: under IE, even objects have srcElement attributes, but no target attributes; under Firefox, even objects have target attributes, but no srcElement attributes.

Solution: use obj (obj=event.srcElement?event.srcElement:event.target;) instead of event.srcElement under IE or event.target under Firefox.

11._window.location.href problem

Note: under IE or Firefox2.0.x, you can use _ window.location or _ window.location.href;Firefox1.5.x, but only _ window.location.

Solution: use _ window.location instead of _ window.location.href.

twelve。 Modal and modeless window problems

Description: modal and modeless windows can be opened through showModalDialog and showModelessDialog in IE, but not in Firefox.

Solution: open a new window directly using window.open (pageURL,name,parameters). If you need to pass parameters in the child window back to the parent window, you can use window.opener in the child window to access the parent window. For example: varparWin=window.opener;parWin.document.getElementById (Aqing) .value=Aqing

13.frame problem

Take the following frame as an example:

(1) access the frame object:

IE: use window.frameId or window.frameName to access this frame object.

Firefox: only window.frameName can be used to access this frame object.

In addition, you can use window.document.getElementById (frameId) to access this frame object in both IE and Firefox.

(2) switch frame content:

You can use window.document.getElementById (testFrame). Src=xxx.html or window.frameName.location=xxx.html to switch the content of frame in both IE and Firefox.

If you need to pass parameters from frame back to the parent window, you can use parent in frme to access the parent window. For example: parent.document.form1.filename.value=Aqing

14.body problem

Firefox's body exists before the body tag is fully read by the browser, while IE's body must exist after the body tag is fully read by the browser.

Firefox:

Document.body.onclick=function (evt) {evtevt=evt | | window.event; alert (evt);} IE&Firefox: document.body.onclick=function (evt) {evtevt=evt | | window.event; alert (evt);}

15. Event delegation method

IE:document.body.onload=inject;//Functioninject () has been implemented before that

Firefox:document.body.onload=inject ()

Some people say that the standard is:

Document.body.onload=newFunction ('inject ()')

The difference between the parent elements of 16.firefox and IE (parentElement)

IE:obj.parentElement

Firefox: obj[xss _ clean]

Solution: because both firefox and IE support DOM, using obj [XSS _ clean] is a good choice.

17.cursor:handVScursor:pointer

Firefox does not support hand, but ie supports pointer

Solution: unified use of pointer

18.innerText works well in IE, but innerText does not work in FireFox.

Solution:

If (navigator.appName.indexOf (Explorer) >-1) {document.getElementById ('element'). InnerText=mytext;} else {document.getElementById (' element'). TextContent=mytext;}

Invalid obj.style.height=imgObj.height-like statement in 19.FireFox

Solution:

Obj.style.height=imgObj.height+'px'

20. IeJournal Firefox and other browsers have different operations on table tags.

InnerHTML assignments to table and tr are not allowed in ie, and the appendChile method does not work when adding a tr to js.

Solution:

/ / append a blank line to table: varrow=otable.insertRow (- 1); varcell=document.createElement (td); cell [XSS _ clean] =; cell.className=XXXX; row.appendChild (cell)

21.padding problem

Padding5px4px3px1pxFireFox cannot explain the abbreviation. It must be changed to padding-top:5px;padding-right:4px;padding-bottom:3px;padding-left:1px.

twenty-two。 When eliminating indentation of ul, ol, etc.

The style should be written as: list-style:none;margin:0px;padding:0px

Where the margin attribute is valid for IE and the padding attribute is valid for FireFox

23.CSS transparent

IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).

FF:opacity:0.6 .

24.CSS fillet

IE: fillets are not supported.

FF:-moz-border-radius:4px, or-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;.

Thank you for reading this article carefully. I hope the article "how to solve the difference between JS under firefox and IE" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.