Compatibility issues and solutions for multiple JavaScript browsers

Compatibility problem and solution of CSS multi-Browser

I. Document. formname. Item ("itemname ")

Problem description: in IE, you can use document. formname. item ("itemname") or document. formname. elements ["elementname"]; In Firefox, only document. formname. elements ["elementname"].
Solution: Use document. formname. elements ["elementname"].

Ii. Collection objects

Problem description: in IE, you can use () or [] to obtain collection class objects. In Firefox, you can only use [] to obtain collection class objects.
Solution: use [] to retrieve collection class objects.

Iii. Custom Attributes

Problem description: in IE, you can use the method to obtain general attributes to obtain custom attributes, or use getattribute () to obtain Custom Attributes. In Firefox, you can only use getattribute () obtain custom attributes.
Solution: Get custom attributes through getattribute.

Iv. eval ("idname") Problems

Problem description: in IE, you can use eval ("idname") or getelementbyid ("idname") to obtain the HTML object whose ID is idname; in Firefox, you can only use getelementbyid ("idname") to obtain the HTML object whose ID is idname.
Solution: Use getelementbyid ("idname") to retrieve the HTML object with ID as idname.

5. The variable name is the same as the ID of an HTML object.

Problem description: in IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document, but not in Firefox. In Firefox, the variable name that is the same as the ID of the HTML object can be used, IE.
Solution: Use document. getelementbyid ("idname") to replace document. idname. We recommend that you do not use variable names with the same HTML Object ID to reduce errors. When declaring variables, add the VaR keyword to avoid ambiguity.

Vi. Const Problems

Problem description: In Firefox, you can use the const keyword or 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.

VII. Input. type attributes

Problem description: The input. Type attribute in IE is read-only, but the input. Type attribute in Firefox is read/write.
Solution: do not modify the input. Type attribute. If you must modify it, You can first hide the original input, and then insert a new input element at the same position.

8. Window. Event Problems

Problem description: window. event can only be run in IE, but not in Firefox, because Firefox Event can only be used in the event.
Solution: add the event parameter to the function where the event occurs and use VaR myevent = EVT? EVT :( window. event? Window. Event: NULL)
Example:

<Input type = "button" onclick = "dosomething (event)"/>
<Script language = "JavaScript">
Function dosomething (EVT ){
VaR myevent = EVT? EVT :( window. event? Window. Event: NULL)
...
}
9. event. X and event. Y

Problem description: in IE, the even object has the X and Y attributes, but does not have the pagex and Pagey attributes. In Firefox, the even object has the pagex and Pagey attributes, but does not have the X and Y attributes.
Solution: var myx = event. X? Event. X: event. pagex; var myy = event. Y? Event. Y: event. Pagey;
If you consider 8th issues, use myevent instead of event.

10. event. srcelement Problems

Problem description: in IE, the even object has the srcelement attribute, but does not have the target attribute. In Firefox, the even object has the target attribute, but does not have the srcelement attribute.
Solution: Use srcobj = event. srcelement? Event. srcelement: event.tar get;
If you consider 8th issues, use myevent instead of event.

11. Window. Location. href

Problem description: in IE or firefox2.0.x, you can use window. Location or window. Location. href; In firefox1.5.x, you can only use window. location.
Solution: Use window. location to replace window. Location. href. Of course, you can also consider using the location. Replace () method.

12. Modal and non-modal window Problems

Problem description: in IE, you can open modal and non-modal windows through showmodaldialog and showmodelessdialog; in Firefox, you cannot.
Solution: Use window. Open (pageurl, name, parameters) to open a new window.
If you want to pass the parameters in the Child window back to the parent window, you can use window. opener in the Child Window to access the parent window. If you need a parent window to control the child window, use VaR subwindow = Window. Open (pageurl, name, parameters); to obtain the new window object.

13. Frame and IFRAME Problems

The following frame is used as an example:

(1) access the frame object
IE: Use window. frameid or window. framename to access this frame object;
Firefox: Use window. framename to access this frame object;
Solution: You can access the frame object by using the metadata Doc ument. getelementbyid ("frameid;
(2) Switching frame content
In both IE and Firefox, you can use javasdomaindoc ument. getelementbyid ("frameid"). src = javaswebjx.com.html "or window. framename. Location = javaswebjx.com.html" to switch the frame content;
If you want to return the parameters in the frame to the parent window, you can use the parent keyword in the frame to access the parent window.

14. Body Loading Problems

Problem description: Firefox's body object exists before the body tag is fully read by the browser, While IE's body object must exist after the body tag is fully read by the browser.
[Note] the problem has not been verified. You can modify it after verification.
[Note] It has been verified that IE6, opera9, and firefox2 do not have the above problems. A simple JS script can access all objects and elements that have been loaded before the script, this element is not loaded yet.

15. Event delegation Method

Problem description: Use document in IE. body. onload = inject; function inject () has been implemented before this; in Firefox, use document. body. onload = inject ();
Solution: Use document. Body. onload = new function ('inject () '), or document. Body. onload = function () {/* here isCode*/}
[Note] differences between functions

16. Differences between parent elements for access

Problem description: in IE, use obj. parentelement or obj. parentnode to access the parent node of obj. In Firefox, use obj. parentnode to access the parent node of obj.
Solution: because both Firefox and IE support DOM, obj. parentnode is used to access the parent node of obj.

17. innertext problems.

Problem description: innertext works normally in IE, but innertext does not work in Firefox.
Solution: Use textcontent instead of innertext in a non-IE browser.
Example:

If (navigator. appname. indexof ("Explorer")>-1 ){
Document. getelementbyid ('element'). innertext = "My text ";
} Else {
Document. getelementbyid ('element'). textcontent = "; my text ";
}
[Note] innerhtml is supported by IE, Firefox, and other browsers at the same time. Others, such as outerhtml, are only supported by IE, so it is best not to use it.

18. Table Operation Problems

Problem description: operations on table labels vary with IE, Firefox, and other browsers. in IE, assignment of innerhtml values to table and TR is not allowed. When a TR value is added to JS, the appendchild method does not work. Supported by Firefox when document. appendchild is inserted into the table, but not by IE
Solution: Insert rows into the tbody instead of the table.
Solution:

// Append an empty row to the table:

VaR ROW = otable. insertrow (-1 );
VaR cell = Document. createelement ("TD ");
Cell. innerhtml = "";
Cell. classname = "XXXX ";
Row. appendchild (cell );
[Note] we recommend that you use the JS framework set to operate tables, such as jquery.

19. Assignment of object width and height

Problem description: The statement similar to OBJ. style. Height = imgobj. Height in Firefox is invalid.
Solution: Use obj. style. Height = imgobj. height + 'px ';

20. setattribute ('style', 'color: red ;')
Supported by Firefox (except IE, supported by all browsers now), not by IE
Solution: Do not use setattribute ('style', 'color: red ')
Use object.style.css text = 'color: red; '(this is also an exception)
The best way is to use the above methods.

Ii. Class Name settings
Setattribute ('class', 'styleclass ')
Supported by Firefox and not supported by IE (if the attribute is specified as class, ie will not set the class attribute of the element. On the contrary, ie will automatically recognize the classname attribute only when setattribute is used)
Solution:
Setattribute ('class', 'styleclass ')

Setattribute ('classname', 'styleclass ')

Or directly object. classname = 'styleclass ';

Both IE and FF support object. classname.

Ii. Use setattribute to set events
VaR OBJ = Document. getelementbyid ('objid ');
OBJ. setattribute ('onclick', 'funcitonname ();');
Supported by Firefox, not supported by IE
Solution:
In ie, the vertex method must be used to reference the required event processing.ProgramAnd grant the anonymous Function
As follows:
VaR OBJ = Document. getelementbyid ('objid ');
OBJ. onclick = function () {fucntionname ();};
All browsers support this method.

Ii. Create a radio button
Browsers other than IE
VaR rdo = Document. createelement ('input ');
Rdo. setattribute ('type', 'Radio ');
Rdo. setattribute ('name', 'radiobtn ');
Rdo. setattribute ('value', 'checked ');

ie:
var rdo = document. createelement ("");
solution:
the difference is different from the previous one. This time is completely different, so we cannot find a common solution, so only if-else is available.
fortunately, ie can identify the uniqueid attribute of the document, other browsers cannot recognize this attribute. Solve the problem.