Compatibility of Javascript in IE and Firefox

The project should be compatible with IE and Firefox. Let me summarize the differences between Javascript in IE and Firefox. I copied some content on the Internet and made some changes:

 

-Element search Problems
1. Document. All [name]
(1) Existing Problem: Firefox does not support document. All [name]
(2) solution: Use getelementsbyname (name), getelementbyid (ID), and so on.

2. Collection class Object Problems
(1) Existing Problems: You can use () For many collection class objects in IE, but you can only use [] in Firefox.
For example, you can use document. Forms ("formname") in IE to return a form named "formname", but it does not work in Firefox.
(2) solution: use []. In the preceding example, you can change it to document. Forms ["formname"].

3. the HTML element ID is visible in JavaScript.
(1) existing problem: the ID of the HTML element in IE can be directly used as the variable name of the subordinate object of document. Not in Firefox.
(2) solution: Use getelementbyid ("idname") instead of idname as the object variable.

4. eval (idname) obtains the object
(1) Existing Problem: in IE, Eval (idname) can be used to obtain the HTML object with ID as idname, which cannot be used in Firefox.
(2) solution: Use getelementbyid (idname) instead of eval (idname ).

5. The variable name is the same as the ID of an HTML object.
(1) Existing Problem: In Firefox, because the Object ID is not the name of the HTML object, you can use the same variable name as the HTML Object ID, which cannot be in IE.
(2) solution: When declaring variables, add VaR to avoid ambiguity, so that it can run normally in IE. In addition, it is best not to take the same variable name as the HTML Object ID to reduce errors.

Note: Problems 3, 4, and 5 belong to the same category.

6. Frame
(1) Existing Problem: windows can be used in IE. top. frameid and window. top. framename is used to obtain the window represented by the frame. Only windows can be used in Firefox. top. framename.
(2) solution: Set the frame ID and name to the same, and use window. Top. framename to access the frame.

Ii. Dom operations
1. Set the text content of the element.
(1) Existing Problem: ie uses innertext, while Firefox uses textcontent to set the element text content.
(2) solution: if the text content does not contain special characters such as "<" and ">", you can use innerhtml. Otherwise, you can use:
VaR child = ELEM. firstchild;
If (child! = NULL) ELEM. removechild (child );
ELEM. appendchild (document. createtextnode (content ));

2. parentelement, parent. Children
(1) Existing Problem: IE can use parentelement to obtain the parent node, and parent. Children can get all the child nodes of the node. Not supported by Firefox.
(2) solution: Use parentnode and parent. childnodes.

3. Explain childnodes.
(1) Existing Problems: different interpretations of childnodes in IE and Firefox, ie does not contain blank text nodes, while Firefox does.
(2) solution: Use childnodes to filter text nodes as follows:
VaR children = ELEM. childnodes;
For (I = 0; I <children. length; I ++ ){
If (Children [I]. nodetype! = 3) {// filter text nodes
//...
}
}

4. Explanation of document. getelementsbyname.
(1) Existing Problem: in IE, getelementsbyname only checks the <input> and elements, while in Firefox, all elements are checked.
(2) solution: Do not use getelementsbyname to check the elements except <input> and . If you want to obtain a single element, use getelementbyid as much as possible.

5. Explanation of document. getelementbyid.
(1) Existing Problem: in IE, getelementbyid not only checks the ID attribute, but also the name attribute. This element is also returned when the name attribute matches the parameter. In Firefox, only the ID attribute is checked.
(2) solution: Try to keep the ID and name the same. Do not make the name attribute of one element the same as the ID attribute of another element.

Iii. Events
1. event. X and event. Y
(1) Existing Problem: in IE, the event object has the X and Y attributes, but not in Firefox.
(2) solution: In Firefox, event. X is equivalent to event. pagex. You can use:
MX = event. X? Event. X: event. pagex;

2. Window. Event
(1) Existing Problem: Windows. event cannot be run on Firefox.
(2) solution:
Original Code (Run in IE ):
<Input type = "button" name = "somebutton" value = "Submit" onclick = "javascript: gotosubmit ()"/>
...
<Script language = "JavaScript">
Function gotosubmit (){
...
Alert (window. Event); // use window. Event
...
}
</SCRIPT>

New Code (run in IE and Firefox ):
<Input type = "button" name = "somebutton" value = "Submit" onclick = "javascript: gotosubmit (event)"/>
...
<Script language = "JavaScript">
Function gotosubmit (EVT ){
EVT = EVT? EVT: (window. event? Window. Event: NULL );
...
Alert (EVT); // use EVT
...
}
</SCRIPT>

3. attachevent and addeventlistener
(1) Existing Problem: Use attachevent in IE to add events, and use addeventlistener in Firefox.
(2) solution: Pay attention to the differences between event parameters, namely click and onclick.
If (document. attachevent) document. attachevent ("click", clickhandler, false );
Else document. addeventlistener ("onclick", clickhandler );

Iv. Syntax
1. Const
(1) Existing Problem: const keywords cannot be used in IE. For example, const constvar = 32; in IE, This Is A syntax error.
(2) solution: use VaR instead of Const.

2. Redundant commas
(1) existing problem: the object text constant in Firefox allows redundant commas, but not in IE. The following statement is invalid in IE.
var OBJ = {'key': 'aaa' ,}< br> (2) solution: Remove unnecessary commas.
5. xml
1. Create XMLHttpRequest
(1) Existing Problem: Firefox uses XMLHttpRequest and IE uses activexobject.
(2) solution:
If (window. XMLHttpRequest) {
Req = new XMLHttpRequest ();
}else if (window. activexobject) {
Req = new activexobject ("Microsoft. XMLHTTP ");
}

2. Create a DOM
(1) Existing Problems: Firefox and IE use different methods to create Dom.
(2) solution:
Function createxmldom (){
VaR oxmldom;
If (window. activexobject) {// IE
Oxmldom = new activexobject ("Microsoft. xmldom ");
} Else {// Firefox
Oxmldom = Document. Implementation. createdocument ("", "", null );
}
}

3. load XML
(1) Existing Problems: If you want to load external files IE and Firefox, you can use:
Oxmldom. async = false; // This is required in Firefox
Oxmldom. Load ("test. xml ");
However, they load XML strings in different ways. You can directly use oxmldom. loadxml ("<root> <child/> </root>") in IE, while Firefox uses domparser:
VaR oparser = new domparser ();
VaR oxmldom = oparser. parsefromstring ("<root/>", "text/XML ");
(2) solution: a better method is to add the loadxml method to the xmldom generated by Firefox:
If (isfirefox) {// browser detection required
Document. Prototype. loadxml = function (sxml ){
VaR oparser = new domparser ();
VaR oxmldom = oparser. parsefromstring (sxml, "text/XML ");

While (this. firstchild) This. removechild (this. firstchild );

For (VAR I = 0; I <oxmldom. childnodes. length; I ++ ){
VaR onewnode = This. importnode (oxmldom. childnodes [I], true );
This. appendchild (onewnode );
}
}
}
In this way, you can call the loadxml method in IE and Firefox.

4. Support for xpath
(1) Existing Problem: in IE, The selectnodes of xmldom can be used directly to select Nodes Based on the XPath expression. Firefox is complicated and xpathevaluator is required.
IE:
VaR lstnodes = oxmldom.doc umentelement. selectnodes ("Employee/Name ");
For (VAR I = 0; I <lstnodes. length; I ++ ){
Alert (lstnodes [I]. firstchild. nodevalue );
}
Firefox:
VaR oevaluator = new xpathevaluator ();
VaR oresult = oevaluator. Evaluate ("Employee/Name", oxmldom.doc umentelement, null, xpathresult. ordered_node_iterator_type, null );
VaR oelement = oresult. iteratenext ();
While (oelement ){
Alert (oelement. firstchild. nodevalue );
Oelement = oresult. iteratenext ();
}
(2) solution: a better method is to add the selectnodes Method to the Firefox element.
If (isfirefox) {// browser detection required
Element. Prototype. selectnodes = function (sxpath ){
VaR oevaluator = new xpathevaluator ();
VaR oresult = oevaluator. Evaluate (sxpath, this, null, xpathresult. ordered_node_iterator_type, null );

VaR anodes = new array ();

If (oresult! = NULL ){
VaR oelement = oresult. iteratenext ();
While (oelement ){
Anodes. Push (oelement );
Oelement = oresult. iteratenext ();
}
}
Return anodes;
}
}
In this way, you can call the selectnodes method in IE and Firefox.

5. XSLT support
(1) Existing Problem: in IE, The transfernode method of xmldom can be used to convert it into HTML, while Firefox needs to use javastprocessor.
IE:
Oxmldom. Load ("employee. xml ");
Oxsldom. Load ("employee. XSLT ");
VaR sresult = oxmldom. transformnode (oxsldom );
Firefox:
VaR oprocessor = new effectprocessor ();
Oprocessor. importstylesheet (oxsldom );
VaR oresultdom = oprocessor. transformtodocument (oxmldom );
VaR oserializer = new xmlserializer ();
VaR sxml = oserializer. serializetostring (oresultdom, "text/XML ");
Alert (sxml );
(2) solution: a better method is to add the transfernode method to Firefox's node.
If (isfirefox) {// browser detection required
Node. Prototype. transformnode = function (oxsldom ){
VaR oprocessor = new effectprocessor ();
Oprocessor. importstylesheet (oxsldom );
VaR oresultdom = oprocessor. transformtodocument (oxmldom );

VaR oserializer = new xmlserializer ();
VaR sxml = oserializer. serializetostring (oresultdom, "text/XML ");

Return sxml;
}
}
In this way, you can call the transfernode method in IE and Firefox.