Javascript compatibility Summary

Ie and standard browsers have different implementations and interfaces for js. The purpose of this article is to summarize common compatibility issues.

1. Collection class Object Problems
In the existing Code, many collection class objects are used (), which is acceptable to IE and cannot be used by Firefox.
Solution: use [] as the subscript operation. For example, change document. forms ("formName")
Js Code copying code
 
Document. forms ["formName"];
// Another example is:
Document. getElementsByName ("inputName") (1 );
// Change
Document. getElementsByName ("inputName") [1];

2. DIV object
In IE, the DIV object can use ID directly as the object variable name. Not in Firefox.
DivId. style. display = "none ";
Solution: document. getElementById ("DivId"). style. display = "none ";
Ps: whether it is a DIV object or not, the getElementById method should be used.

3. About frame
Existing Problem: You can use window. testFrame in IE to obtain the frame, but not in mf.
Solution: the main difference between Firefox and IE in frame usage is:
If the following attributes are written in the frame tag:
Then IE can access the window object corresponding to this frame through id or name.
However, mf can only access the window object corresponding to this frame through name.
For example, if the above frame label is written in the htm in the top window, you can access
IE: window. top. frameId or window. top. frameName to access this window object
Firefox: only window. top. frameName can access this window object.
In addition, both mfand iecan use javasdesktop.doc ument. getElementById ("frameId") to access the frame tag.
In addition, you can switch the frame content through the parameter top.doc ument. getElementById ("testFrame"). src = 'xx.htm '.
You can also switch the frame content through window. top. frameName. location = 'xx.htm '.

4. Window
Existing problems: in IE, you can open modal and non-modal windows through showModalDialog and showModelessDialog, but Firefox does not.
Solution: Use window. open (pageURL, name, parameters) to open a new window.
If you want to pass parameters, you can use frame or iframe.

5. When defining various object variable names in JS, use id whenever possible to avoid using name.
In IE, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. It cannot be used in Firefox, so use id whenever possible to avoid using only name instead of id.

6. document. all
Firefox is compatible with document. all, but generates a warning. You can use getElementById ("*") or getElementByTagName ("*) instead.
However, attributes such as document. all. length are completely incompatible. Do not use the document. all attribute whenever possible.

7. parentElement
In IE, you can use parentElement and parentNode to obtain the parent node.
Firefox can only use parentNode.

8. event
W3C does not support windows. event
For example, in IE:
Function onMenuClick (){
CollapseMenu (event. srcElement );
}
Working properly. But in Firefox, it is changed:
Function onMenuClick (evt ){
If (evt = null)
Evt = window. event; // For IE
Var srcElement = evt. srcElement? Evt. srcElement: evt.tar get;
// IE uses srcElement, while Firefox uses target
CollapseMenu (srcElement );

9. event. x and event. y
In IE, the event object has the x and y attributes, but not in Firefox.
Solution:
In Firefox, event. x is equivalent to event. pageX. But event. pageX IE does not.
Therefore, event. clientX is used instead of event. x. This variable is also available in IE.
Event. clientX is slightly different from event. pageX (when the page has a scroll bar ),
But most of the time is equivalent.
If it is the same, it may be a little troublesome:
MX = event. x? Event. x: event. pageX;
Use mX instead of event. x

10. The problem of getting an object using the idName string
In IE, eval (idName) can be used to obtain the HTML object with id as idName, which cannot be used in Firefox.
Solution: Use getElementById (idName) instead of eval (idName ).

11. nodeName and tagName Problems
In Firefox, all nodes have a nodeName value, but textNode does not have a tagName value.
In IE, nodeName may be used.
Solution:
Use tagName, but check whether it is empty.

12. type attribute of input
The input. type attribute in IE is read-only, but can be modified in Firefox.

13. Custom Attributes
In mf, the defined attributes must be obtained by getAttribute ().
IE can be obtained directly through the "." operator.

14. const Problems
You cannot use the const keyword in IE. For example
Const constVar = 32;
In IE, This Is A syntax error.
Solution:
Use var instead of const.

15. body object
Firefox's body exists before the body tag is fully read by the browser, While IE exists only after the body is fully read.

16. Analysis of alt and title of img objects
Alt: the prompt when the photo does not exist or the load error occurs,
Title: Photo tip description,
If title is not defined in IE, alt can also be used as the img tip. However, in Firefox, the two are completely used according to the standard definition.
When defining img objects, it is best to write all alt and title objects to ensure normal use in various browsers.

17. nodes obtained by childNodes
The meanings of childNodes are different in IE and Firefox. Using DOM standards in Firefox, blank text nodes are inserted in childNodes.
When obtaining a subnode, you can avoid this problem by using node. getElementsByTagName.

18. removeNode ()
The node in Firefox does not have the removeNode method. You must use the following method:
Node. parentNode. removeChild (node );

19. innerText
Supported by IE, not supported by FIREFOX
The textConent attribute is used to set the content text in FF.

20. Differences between XMLHTTP
The creation method in FireFox is as follows:
Xmlhttp = new XMLHttpRequest ()
In IE:
Xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP ")

21. img src refresh
You can use IE to refresh images, but not FireFox. The main issue is caching. Add a random number after the address to solve the problem:
MyImg. src = this. src + '? '+ Math. random ();

22. setAttribute () attribute setting
Many Attributes in IE cannot be set with setAttribute, but can be set in Firefox, for example:
TheDiv. setAttribute ('style', 'color: red ');
// Change:
Object.style.css Text = 'color: red ;';
SetAttribute ('class', 'styleclass ')
// Change:
SetAttribute ('classname', 'styleclass ');
Obj. setAttribute ('onclick', 'funcitonname ();');
// Change:
Obj. onclick = function () {fucntionname ();};

23. outterHTML
IE provides the outerHTML interface to return the html code of the dom node (including the node itself). Other standard browsers do not support this interface.