JavaScript in IE and Firefox browser common compatibility issues summary _javascript Tips

This article summarizes the common compatibility problems of JavaScript in IE and Firefox browsers. Share to everyone for your reference, specific as follows:

Form

Document.formName.item ("ItemName")

IE: You can use Document.formName.item ("ItemName") or document.formname.elements["ElementName"]

Firefox: Only use document.formname.elements["ElementName"]

Workaround: unify the use of document.formname.elements["ElementName"]

Collection Class object

IE: You can use () or [] Get collection class objects;

Firefox: You can only use [] to get collection class objects.

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

Custom properties

IE: You can obtain custom attributes by using the method that gets the general properties, or you can use GetAttribute () to get the defined attributes

Firefox: You can only use getattribute () to obtain a defined attribute.

Workaround: The unification is obtained from the defined attribute through GetAttribute ().

Element gets

Eval ("Idname")

IE: You can use either eval ("Idname") or getElementById ("Idname") to obtain an HTML object with an ID of idname;

Firefox: You can only use getElementById ("Idname") to get an HTML object with an ID of idname.

Workaround: unify the getElementById ("Idname") to get the HTML object with the ID idname.

Name Duplicates

Problem with the same variable name as an HTML object ID

The ID of the Ie:html object can be used directly as the subordinate object variable name of document, but not under Firefox.

Firefox: You can use the same variable name as the HTML object ID, ie cannot.

Workaround: use document.getElementById ("Idname") instead of document.idname. It is best not to take variable names with the same HTML object ID to reduce errors and, when declaring variables, add var to avoid ambiguity.

Const

IE: Variables can only be defined using the var keyword.

Firefox: You can use the Const keyword or the var keyword to define a variable.

Workaround: use the var keyword uniformly to define variables.

Input.type

Input.type Property Problem

The IE:input.type property is read-only.

The Firefox:input.type property is read-write.

Window.event

Window.event can only run under IE, not under Firefox, because Firefox events can only be used on the spot where the event occurred.

Firefox: An event must be added from the source for parameter passing. IE ignores this parameter and uses window.event to read the event.

Workaround:

<script language= "javascript" > 
function Fun (e) { 
  e = e. E: (window.event? window.event:null); 
} 
</script>

Event.x and Event.y

Note: Under IE, the even object has x,y attribute, but there is no pagex,pagey attribute; Firefox, even objects have pagex,pagey properties, but no x,y properties.
Workaround: use mx (mx = event.x Event.x:event.pagex) to replace the event.x under IE or the Event.pagex under Firefox.

Event.srcelement

The Ie:event object has a srcelement attribute, but no target attribute;

The Firefox:even object has a target attribute, but no srcelement attribute.

Workaround: use obj (obj = event.srcelement? event.srcElement:event.target;) To replace IE under the Event.srcelement or Firefox under the Event.target. Please also note the event compatibility issue.

Window.location.href

IE or firefox2.0.x: You can use window.location or window.location.href;

firefox1.5.x: Only use window.location

Workaround: use window.location instead of window.location.href.

Modal and non-modal windows

IE: can open modal and modeless windows via ShowModalDialog and showModelessDialog

Firefox: No!

Workaround: Open the new window directly using the window.open (pageurl, name, parameters) method.
If you need to pass parameters from a child window back to the parent window, you can use Window.opener in the child window to access the parent window. For example: var Parwin = Window.opener;parwin.document.getelementbyid ("aqing"). Value = "aqing";

Frame

Take the following frame as an example:

<frame src= "xxx.html" id= "Frameid" name= "FrameName"/>

1. Access to the Frame object:

[IE returned as object, FF will display specific types such as: Object window]

IE: Use Window.frameid or window.framename to access this frame object. Frameid and FrameName can have the same name.
Firefox: You can only use Window.framename to access this frame object.
Window.document.getElementById ("Frameid") can be used in both IE and Firefox to access this frame object.

2. Switch frame content:

Window.document.getElementById ("Testframe") can be used in both IE and Firefox. src = "xxx.html" or window.frameName.location = " Xxx.html "to toggle the contents of the frame.
If you need to pass parameters in a frame back to the parent window (note that it is not opener, but parent frame), you can use parent in frme to access the parent window. For example: Parent.document.form1.filename.value= "a";

Body

Ie:body must not exist until the body tag is fully read by the browser.

Firefox:body exists before the body tag is fully read by the browser.

Event Delegate Method

Ie:

Copy Code code as follows:

Document.body.onload = inject; function inject () was implemented prior to this

Firefox:

Copy Code code as follows:

Document.body.onload = inject ();

Parent element

The difference between Firefox and IE's parent element (parentelement)

IE:obj.parentElement

Firefox:obj.parentNode

Workaround: because both Firefox and IE support DOM, using Obj.parentnode is a good choice.

mouse pointer cursor

Cursor:hand VS Cursor:pointer

Firefox: Hand not supported

IE: Support pointer

Workaround: unify the use of pointer

Content text

InnerText in IE can work properly. But innertext in Firefox but not, need textcontent.

Workaround:

if (Navigator.appName.indexOf ("explorer") >-1) { 
  document.getElementById (' element '). innertext = "my text"; 
} else{ 
  document.getElementById (' element '). TEXTC 
}

Operations on a table

Ie,firefox and other browsers for table label operations are different, in IE does not allow the table and TR innerHTML assignment, using JS to add a TR, using the AppendChild method does not matter.

Workaround:

Appends a blank line to the table: 
var row = Otable.insertrow ( -1); 
var cell = document.createelement ("TD"); 
cell.innerhtml = ""; 
Cell.classname = "a"; 
Row.appendchild (cell);

Options Collection

Operations on the options collection for select

Enumeration elements can be SelectName.options.item () in addition to [], and SelectName.options.length, Selectname.options.add/remove can be used on both browsers.

* Note the assignment element after add, otherwise it will fail.

XMLHTTP

if (window. XMLHttpRequest) { 
  xmlhttp = new XMLHttpRequest (); 
} else if (window. ActiveXObject) {//code for IE 
  xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); 
} 
if (XMLHTTP) { 
  xmlhttp.onreadystatechange = Xmlhttpchange; 
  Xmlhttp.open ("Get", url,true); 
  Xmlhttp.send (); 
}

More readers interested in JavaScript-related content can view the site topics: "JavaScript error and debugging skills Summary", "JavaScript Mathematical operational Usage Summary", "JavaScript in the JSON Operation tips Summary", " JavaScript switching effects and techniques summary, "JavaScript Search Algorithm Skills Summary", "JavaScript animation effects and Skills summary", "JavaScript data structure and algorithm skills summary" and "JavaScript traversal algorithm and Skills summary"

I hope this article will help you with JavaScript programming.