Javascript multi-browser compatibility summary (practical experience)

1. ("itemName") Problem
Problem description: Under IE, you can use ("itemName") or ["elementName"]; under Firefox, you can only use ["elementName"].
Solution: Use ["elementName"] in a unified manner.

2. Collection object problem
Problem description: In IE, you can use () or [] to get the collection class object; in Firefox, you can only use [] to get the collection class object.
Solution: Use [] to obtain collection class objects in a unified manner.

3. Custom attribute issues
Problem description: In IE, you can use the method of obtaining regular attributes to get custom attributes, or you can use getAttribute() to get custom attributes; in Firefox, you can only use getAttribute() to get custom attributes.
Workaround: uniformly obtain custom attributes through getAttribute().

4. Eval("idName") problem
Problem description: In IE, you can use eval("idName") or getElementById("idName") to get HTML object with idName; in Firefox, you can only use getElementById("idName") to get HTML object with idName with idName.
Solution: Use getElementById("idName") to obtain the HTML object with id as idName.

5. The problem of the variable name and the ID of a certain HTML object
Problem description: Under IE, the ID of the HTML object can be used directly as the variable name of the document's subordinate object, but not in Firefox; under Firefox, the variable name that is the same as the HTML object ID can be used, but not in IE.
Workaround: Use ("idName") instead. It is best not to take variable names with the same HTML object ID to reduce errors; when declaring variables, add the var keyword to avoid ambiguity.

6. Const issue
Problem description: In Firefox, you can use the const keyword or the var keyword to define constants; in IE, you can only use the var keyword to define constants.
Solution: Use the var keyword to define constants uniformly.

7. Properties Problems
Problem description: The attribute under IE is read-only; but the attribute under Firefox is read-write.
Solution: Do not modify the properties. If you have to modify it, you can first hide the original input and then insert a new input element in the same position.

8. Question
Problem Description: It can only run under IE, not in Firefox, because Firefox event can only be used on the scene where the event occurs.
Solution: Add event parameter to the function where the event occurs, and use var myEvent = evt?evt:(?:null)
Example:

9. With the problem
Problem description: Under IE, the even object has x and y attributes, but no pageX and pageY attributes; under Firefox, the even object has pageX and pageY attributes, but no x and y attributes.
Solution: var myX = ? : ; var myY = ? :;
If you consider the 8th issue, just use myEvent instead of event.

10. Problem
Problem description: Under IE, the even object has a srcElement property, but no target property; under Firefox, the even object has a target property, but no srcElement property.
Solution: Use srcObj = ? : ;
If you consider the 8th issue, just use myEvent instead of event.

11. Question
Problem description: Under IE or Firefox2., it can be used or; under Firefox1., it can only be used.
Solution: Use instead. Of course, you can also consider using the () method.

12. Modal and non-modal window problems
Problem description: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; under Firefox, it cannot.
Solution: Use (pageURL,name,parameters) directly to open a new window.
If you need to pass parameters in the child window back to the parent window, you can use it in the child window to access the parent window. If the parent window needs to control the child window, use varsubWindow = (pageURL,name,parameters); to obtain the newly opened window object.

Thirteen, frame and iframe issues
The following frame is an example:
(1) Access frame object
IE: Use or access this frame object;
Firefox: Use to access this frame object;
Solution: Use ("frameId") uniformly to access this frame object;
(2) Switch frame content
In both IE and Firefox, you can use ("frameId").src = "" or "" to switch the content of the frame;
If you need to pass parameters in the frame back to the parent window, you can use the parent keyword in the frame to access the parent window.

14. Body loading problem
Problem description: Firefox's body object exists before the body tag is fully read in by the browser; while IE's body object must exist after the body tag is fully read in by the browser.
[Note] This issue has not been actually verified yet, and will be modified after verification.
[Note] It has been proved that the above problems do not exist in IE6, Opera9 and FireFox2. A simple JS script can access all objects and elements that have been loaded before the script, even if this element has not been loaded yet.

15. Event delegation method
Problem description: In IE, use = inject; where function inject() has been implemented before this; in Firefox, use = inject();
Solution: Use =new Function('inject()'); or = function(){/* Here is the code */}
[Note] The difference between Function and Function

16. The difference between the parent element accessed
Problem description: Under IE, use or access the parent node of obj; under firefox, use use to access the parent node of obj.
Solution: Because both firefox and IE support DOM, they are used uniformly to access obj's parent node.

17. The problem of innerText
Problem description: innerText works properly in IE, but innerText does not work in FireFox.
Workaround: Use textContent instead of innerText in non-IE browsers.
Example:

[Note] innerHTML is supported by browsers such as ie and firefox. Others, such as outerHTML, are only supported by ie, so it is best not to use it.

18. Table operation issues
Problem description: IE, firefox and other browsers have different operations on table tags. In ie, it is not allowed to assign innerHTML values ​​to table and tr. When using js, using appendChild method does not work. FIREFOX supports it when inserting rows into the table, but IE does not support it
Solution: Insert rows into TBODY, do not insert them directly into tables
Solution:
//Add a blank line to the table:
var row = (-1);
var cell = ("td");
= "";
= "XXXX";
(cell);
[Note] It is recommended to use JS framework sets to operate tables, such as JQuery.

19. Object width and height assignment problem
Problem Description: A statement similar to = in FireFox is invalid.
Solution: Use = + ‘px’ in a unified way;

20. setAttribute('style','color:red;')
FIREFOX supports (except IE, all browsers now support it), IE does not support it
Solution: Don't setAttribute('style','color:red')
And use = ‘color:red;’ (there are exceptions to this writing)
The best way is to use all the above methods, and it will be foolproof.

21. Class name setting
setAttribute('class','styleClass')
FIREFOX supports, but IE does not support (specify the attribute name is class, IE will not set the element's class attribute. On the contrary, IE will automatically recognize the CLASSNAME attribute when setAttribute is used)
Solution:
setAttribute('class','styleClass')
setAttribute('className','styleClass')
Or directly ='styleClass';
Both IE and FF support.

22. Set events with setAttribute
var obj = ('objId');
('onclick','funcitonname();');
FIREFOX supports, but IE does not support
Solution:
In IE, dot notation must be used to refer to the required event handler, and anonymous functions must be assigned to it.
as follows:
var obj = ('objId');
=function(){fucntionname();};
This method is supported by all browsers

23. Create a radio button
Browsers other than IE

Solution:
This difference is different from the previous one. This time it is completely different, so there is no common way to solve it, so only IF-ELSE
Fortunately, IE can recognize the uniqueID attribute of the document, which other browsers cannot recognize. Problem solved.