Javascript multi-browser compatibility issues and solutions

Whether it is the website application or learning JS, we pay attention to IE and Firefox browser compatibility issues, after all, these two browsers are accounted for the overwhelming majority.

CSS multi-browser compatibility issues and solutions

First, Document.formName.item ("itemname") problem
Problem description: Under IE, you can use Document.formName.item ("ItemName") or document.formName.elements ["ElementName"];firefox, Use only document.formname.elements["ElementName"].
Workaround: Use document.formname.elements["elementname" uniformly.
The problem of the collection class object

Problem description: Under IE, you can use () or [] get the Collection class object; Firefox can only use [] to get the collection class object.
WORKAROUND: Use [] uniformly to get the collection class object.
Iii. Custom Attribute issues
Problem description: Under IE, you can get custom properties by using the method of getting the general properties, or you can use GetAttribute () to obtain the custom attributes, and under Firefox, you can only use getattribute () to derive the custom attributes.
Workaround: Unify through getattribute () to get the custom attributes.
iv. eval ("Idname") issues
Problem description: Under IE, you can use eval ("Idname") or getElementById ("Idname") to get an HTML object with ID idname; Firefox can only use getElementById ("Idname") To get an HTML object with ID idname.
Workaround: Unify the getElementById ("Idname") to obtain an HTML object with ID idname.
problem with the same variable name as an HTML object ID
Problem description: Under IE, the ID of the HTML object can be used directly as the subordinate object variable name of document, Firefox can not be used, Firefox, under the same name as the HTML object ID, ie cannot.
Workaround: Use document.getElementById ("Idname") instead of document.idname. It is best not to take the same variable name as the HTML object ID to reduce the error, and when declaring the variable, add the var keyword to avoid ambiguity.
Vi. The problem of const
Problem Description: Under Firefox, you can use the Const keyword or the var keyword to define constants; Under IE, you can only use the var keyword to define constants.
Workaround: Use the var keyword uniformly to define constants.
Vii. input.type attribute problems

Problem Description: The Input.type property under IE is read-only, but the Input.type property in Firefox is read-write.
WORKAROUND: Do not modify the Input.type property. If you have to modify it, you can hide the original input and then insert a new INPUT element in the same location.
Viii. window.event Issues
Problem Description: Window.event can only run under IE, but not under Firefox, because Firefox event can only be used on the spot where events occur.
Workaround: Add an event parameter to the function that occurred on the incident, and use var myevent = Evt?evt in the function body (assuming the parameter is 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)
...
}
ix. Event.x and EVENT.Y problems
Problem description: Under IE, even object has X, Y property, but no Pagex, Pagey property; Under Firefox, the even object has Pagex, Pagey properties, but no X, y properties.
Workaround: var myx = event.x? Event.x:event.pagex; var MyY = Event.y? Event.y:event.pagey;
If you consider question 8th, use MyEvent instead of event.
10, event.srcelement problem
Problem description: Under IE, even object has Srcelement property, but no target property; Under Firefox, even object has the target property, but there is no srcelement attribute.
Workaround: Use Srcobj = event.srcelement? Event.srcElement:event.target;
If you consider question 8th, use MyEvent instead of event.
11, Window.location.href problem
Problem Description: Under 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. Of course, you can also consider using the Location.replace () method.
12. Modal and non modal window problems
Problem description: Under IE, the modal and non-modal windows can be opened via ShowModalDialog and showModelessDialog; Firefox can't.
WORKAROUND: Open a new window directly using window.open (pageurl,name,parameters).
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. If you need a parent window to control the Subwindow, use var subwindow = window.open (pageurl,name,parameters); To get the newly opened window object.
13. Frame and IFRAME issues
Take the following frame as an example:
(1) Accessing the Frame object
IE: Use Window.frameid or window.framename to access the frame object;
Firefox: Use Window.framename to access the frame object;
Workaround: Use Window.document.getElementById ("Frameid") to access the frame object uniformly;
(2) Toggle frame content
You can use Window.document.getElementById ("Frameid") in both IE and Firefox. src = "webjx.com.html" or window.frameName.location = " webjx.com.html "To switch the contents of the frame;
If you need to pass the parameters in the frame back to the parent window, you can use the parent keyword in the frame to access it.
14. Body Loading Problem
Problem Description: The body object of Firefox exists before the body tag is fully read by the browser, while the body object of IE must exist after the body tag is fully read into the browser.
[note] This issue has not been verified and will be modified after verification.
[note] proven, IE6, Opera9, and FireFox2 do not have the above problem, the simple JS script can access all the objects and elements that have been loaded before the script, even if this element has not been loaded complete.
15. Event Delegation Method
Problem description: Under IE, use document.body.onload = inject; where function inject () has been implemented before, in Firefox, using document.body.onload = inject ();
Workaround: Use document.body.onload=new Function uniformly (' inject () '); or document.body.onload = function () {/* Here is the code */}
Note function and Function differences
16. The difference between the access parent element
Problem description: Under IE, use obj.parentelement or Obj.parentnode to access the parent node of obj; under Firefox, use Obj.parentnode to access the parent node of obj.
Workaround: Because both Firefox and IE support the DOM, the Obj.parentnode is used uniformly to access the parent node of obj.
17, innertext problem.

Problem description: InnerText in IE can work normally, but innertext in Firefox but not.
WORKAROUND: Use textcontent instead of innertext in non-IE browsers.
Example:
if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById (' element '). InnerText = "my text";
} else{
document.getElementById (' element '). textcontent = "; my text";
}
[note] InnerHTML at the same time by IE, Firefox and other browser support, and other, such as outerhtml only supported by IE, preferably not.
18, table operation problems
Problem description: IE, Firefox and other browsers for the table label operation is different, in IE does not allow the table and TR innerHTML assignment, using JS to add a TR, using the AppendChild method is not used. Document.appendchild Firefox support when inserting rows into the table, IE does not support
WORKAROUND: Insert the row into the tbody and do not insert it directly into the table
Workaround:
Append a blank line to the table:
var row = Otable.insertrow (-1);
var cell = document.createelement ("TD");
cell.innerhtml = "";
Cell.classname = "XXXX";
Row.appendchild (cell);
[note] It is recommended to use the JS frameset to manipulate table, such as jquery.
19. Object width and height assignment problem
Problem Description: A statement similar to obj.style.height = Imgobj.height in Firefox is invalid.
Workaround: Unify the use of Obj.style.height = Imgobj.height + ' px ';
20, SetAttribute (' style ', ' color:red; ')
Firefox support (except IE, all browsers now support), IE does not support
Workaround: Do not setattribute (' style ', ' color:red ')
And with object.style.cssText = ' color:red; ' (There are exceptions to this notation)
The best way to do this is to use all of the above methods, foolproof.
21. Class Name setting
SetAttribute (' class ', ' StyleClass ')
Firefox support, IE is not supported (specifies that the attribute named Class,ie does not set the class property of the element, but instead only uses setattribute when the IE automatically classname property)
Workaround:
SetAttribute (' class ', ' StyleClass ')
SetAttribute (' ClassName ', ' StyleClass ')
or directly object.classname= ' styleClass ';
Both IE and FF support Object.classname.
22. Setting Events with SetAttribute
var obj = document.getElementById (' objId ');
Obj.setattribute (' onclick ', ' funcitonname (); ');
Firefox support, IE does not support
Workaround:
You must use dot capable to reference the required event handlers in IE, and to assign anonymous functions
As follows:
var obj = document.getElementById (' objId ');
Obj.onclick=function () {fucntionname ();};
This method is supported by all browsers
two or three. Create a radio button
Browsers outside of IE
var rdo = document.createelement (' input ');
Rdo.setattribute (' type ', ' Radio ');
Rdo.setattribute (' name ', ' radiobtn ');
Rdo.setattribute (' value ', ' checked ');
Ie:
var rdo =document.createelement ("<input name=" RADIOBTN "type=" Radio "value=" Checked "/>");
Workaround:
This difference is different from the previous one. This time is completely different, so there is no common way to solve, then only if-else.
Fortunately, IE can recognize the UniqueID attribute of document, and no other browser can recognize this attribute. Problem solving.

Javascript multi-browser compatibility issues and solutions