JavaScript for multi-browser compatibility issues and solutions

CSS and JavaScript development, the most frustrating problem is browser compatibility, although many articles have this aspect of the article, but still let a lot of developers dizzy, but also not comprehensive. This article will be a comprehensive collection of CSS and JavaScript compatibility reports under various browsers, and we look forward to your continued additions.

As more and more content is found, the decision is to separate the CSS from JavaScript.

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 the event parameter to the function that occurred on the incident, and in the function body (assuming the parameter is evt) 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) ...}

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.

X. event.srcelement Problems

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.

Xi. the question of window.location.href

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 uniformly Window.document.getElementById ("Frameid") to access the Frame object, (2) switch frame content can be used in IE and Firefox Window.document.getElementById ("Frameid"). src = "webjx.com.html" or window.frameName.location = "webjx.com.html" To switch the contents of the frame, and if you need to pass the arguments 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.

XV, 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] The difference between function and function

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 the workaround: Insert rows into the tbody and do not insert them directly into the table solution:

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 the solution: Do not setattribute (' style ', ' color:red ') and with object.style.cssText = ' color:red; ' The best way to do this is to use all of the methods above, foolproof.

21. Class Name setting

SetAttribute (' class ', ' StyleClass ') Firefox support, IE not supported (specifies that the property named Class,ie does not set the class property of the element, Instead only use SetAttribute when IE automatically recognizes classname properties) Solution: SetAttribute (' class ', ' StyleClass ')

SetAttribute (' ClassName ', ' StyleClass ')

or directly object.classname= ' styleClass ';

Both IE and FF support Object.classname.

22. Setting events with SetAttribute

var bj = document.getElementById (' objId ');

Obj.setattribute (' onclick ', ' funcitonname (); ');

Firefox support, IE does not support the solution: IE must use the DOT capable reference the required event handlers, and to be given the anonymous function as follows: var bj = document.getElementById (' objId '); Obj.onclick=function () {fucntionname ();}; This method is supported by all browsers

Two or three. Create a radio button

IE browser 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 not the same as in the previous one. This time is completely different, so there is no common way to solve, then only if-else Fortunately, IE can identify the document's UniqueID attribute, other browsers can not recognize this attribute. Problem solving.

JavaScript for multi-browser compatibility issues and solutions