A fast solution to the 23 problems of multi-browser compatibility in JavaScript _javascript tips

First, Document.formName.item ("itemname") problem

Problem description: Under IE, you can use Document.formName.item ("ItemName") or document.formName.elements ["ElementName"];firefox, You can only use the document.formname.elements["ElementName"].

Workaround: Unify the use of document.formname.elements["ElementName"].

Problem of object of collection class

Problem Description: IE, you can use () or [] Get collection Class objects, Firefox, can only use [] Get collection class objects.

WORKAROUND: Use [] to get collection class objects uniformly.

Third, custom attribute issues

Problem Description: IE, you can use to get the general properties of the method to obtain custom attributes, can also be used getattribute () derived from the definition of properties, Firefox, can only use getattribute () derived from the definition of attributes.

Workaround: The unification is obtained from the defined attribute through GetAttribute ().

Iv. eval ("idname") question

Problem description: Under IE, you can use the eval ("Idname") or getElementById ("Idname") to get the HTML object ID idname; Firefox, only use getElementById ("Idname") To get the HTML object with the ID idname.

Workaround: Unify the getElementById ("Idname") to get the HTML object with the ID idname.

Problem with the same variable name as an HTML object ID

Problem Description: IE, HTML object ID can be used as document subordinate object variable name directly use, Firefox can not; Firefox, you may use the same variable name as the HTML object ID, ie cannot.

Workaround: Use document.getElementById ("Idname") instead of document.idname. It is best not to take variable names with the same HTML object ID to reduce errors and, when declaring variables, add the var keyword to avoid ambiguity.

Vi. the question of the const

Problem Description: Firefox, you can use the Const keyword or the var keyword to define constants, ie, only use the var keyword to define constants.

Workaround: Use the var keyword uniformly to define constants.

Vii. Input.type Property Issues

Problem Description: IE under the Input.type property is read-only, but Firefox under the Input.type property is read and 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 problem

Problem Description: Window.event can only run under IE, but not under Firefox, this is because Firefox event can only be used in the scene of the incident occurred.

Workaround: Add the event argument to the function that occurred 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 issues

Problem description: Under IE, even objects have X, Y properties, but there is no Pagex, Pagey properties; Firefox, even objects have 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 the 8th question is considered, replace the event with MyEvent instead.

Ten, event.srcelement problem

Problem description: Under IE, the even object has srcelement properties, but there is no target attribute; Under Firefox, even objects have the target attribute, but there is no srcelement attribute.

Workaround: Use Srcobj = event.srcelement? Event.srcElement:event.target;

If the 8th question is considered, replace the event with MyEvent instead.

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, you can open modal and modeless windows via ShowModalDialog and showModelessDialog;

WORKAROUND: Open the new window directly using the window.open (Pageurl,name,parameters) method.

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. Use var Subwindow = window.open (pageurl,name,parameters) If you want the parent window to control the child window; To get the newly opened window object.

13, frame and IFRAME problem

Take the following frame as an example:

(1) Access to the Frame object

IE: Use Window.frameid or window.framename to access this frame object;

Firefox: Use Window.framename to access this frame object;

Workaround: Unify the use of Window.document.getElementById ("Frameid") to access this frame object;

(2) Switch frame content

Window.document.getElementById ("Frameid") can be used in both IE and Firefox. src = "webjx.com.html" or window.frameName.location = " Webjx.com.html "to toggle the contents of the frame;

If you need to return a parameter in a frame to the parent window, you can use the parent keyword in the frame to access it.

14, Body loading problem

Problem Description: Firefox's body object in the body tag is not fully read by the browser before the existence, and IE's body object must be in the body tag is fully read into the browser after the existence.

[note] This problem has not been validated and will be modified after verification.

[note] There are no such problems in IE6, Opera9, and FireFox2, and simple JS scripts can access all the objects and elements that have been loaded before the script, even if the element is not yet loaded.

The method of event entrusting

Problem description: Under IE, use document.body.onload = inject; where function inject () has been implemented before, under Firefox, using document.body.onload = inject ();

Workaround: Unify the use of document.body.onload=new Function (' inject () '); or document.body.onload = function () {/* Here is the code */}

Attention The difference between function and function

16, the difference between the parent element of the access

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 DOM, the Obj.parentnode is used uniformly to access the parent node of obj.

17, the innertext problem.

Problem description: InnerText in IE can work, 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, other, such as outerhtml, such as only by IE support, preferably not.

18, table operation problem

Problem description: IE, Firefox and other browsers for table label operation are different, in IE not allowed to table and TR innerHTML assignment, use JS to add a TR, use the AppendChild method also no use. Document.appendchild Firefox support when inserting rows into table, IE does not support

WORKAROUND: Insert the row into the tbody, not directly into the table

Workaround:

Appends 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 that you use the JS framework set to manipulate the table, such as jquery.

• Get the number of rows and columns of the table

In IE, the following code can be used to get the number of rows:

var detailt= grid.gettable ("one"); 
  Gets the length of the line
  var r=detailt.rows.length; 
  Gets the length of the column
  var l=detailt.cells.length;

It is not valid to get the length of a column in Firefox or Google.

Solution:

var detailt= grid.gettable ("one"); 
Gets the length of the line
var r=detailt.rows.length;
Gets the length of the column
var l=detailt.rows[0].cells.length;

19, the object width high assignment problem

Problem Description: Firefox similar obj.style.height = imgobj.height statement is invalid.

Solution: Unified Use of Obj.style.height = Imgobj.height + ' px ';

20, setattribute (' style ', ' color:red; ')

Firefox support (except IE, now all browsers are supported), IE does not support

Solution: No setattribute (' style ', ' color:red ')

And with object.style.cssText = ' color:red; ' (There are exceptions to this notation)

The best way is to use the above methods, foolproof

21. Class Name setting

SetAttribute (' class ', ' StyleClass ')

Firefox support, IE does not support (the specified property name is Class,ie will not set the element's Class property, instead of using only setattribute when IE automatically classname properties)

Solution:

SetAttribute (' class ', ' StyleClass ') 

setattribute (' className ', ' StyleClass ') 

Both IE and FF support Object.classname.

22. Set up events with SetAttribute

var obj = document.getElementById (' ObjID ');
Obj.setattribute (' onclick ', ' funcitonname (); ');

Firefox support, IE does not support

Solution:

In IE, you must refer to the required event handlers with a Falay, and use the given anonymous function

As follows:

var obj = document.getElementById (' ObjID '); 

This method is supported by all browsers

Two or three, the establishment of a radio button

browsers other than IE

var rdo = document.createelement (' input '); 
Rdo.setattribute (' type ', ' Radio '); 
Rdo.setattribute (' name ', ' radiobtn '); 

Ie:

Solution:

This difference is different from the one in front. This is completely different, so there is no common way to solve, then only If-else
Fortunately, IE can identify the document's UniqueID attribute, which no other browser can recognize. Solve the problem.

Above this javascript to solve the problem of multiple browser compatibility 23 fast solution is small series to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.