Summarize the different usage differences of JS in IE and Firefox

Summarize the different usage differences of JS in IE and Firefox
1. Document.form.item question

Problem:

There are many Document.formname.item ("itemname") statements in existing code that cannot be run under Firefox

Workaround:

Unified use of document.formname.elements["ElementName"]

2. Collection Class object problem

Problem:

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

Workaround:

Use [] as the subscript operation instead. such as: Document.forms ("FormName") changed to document.forms["FormName"]

Also as follows: Document.getelementsbyname ("InputName") (1) Changed to Document.getelementsbyname ("InputName") [1]

3. Event

Get Event Issue:

Window.event can only run under IE, not under Firefox, because Firefox events can only be used on the spot where the event occurred.

Workaround:

In IE, an event object cannot be passed as a parameter to an incident handler, and only window.event or event can be referenced.

Ways to get event in Firefox:

(1) Passing Parameters from HTML page event (2) event = Arguments.callee.caller.arguments[0];

function GetEvent (evt) {evt=evt?evt: (window.event?window.event:null); }

Event attribute problem:

IE, the event object has a X,y attribute, but there is no pagex,pagey attribute; Firefox, the event object has pagex,pagey properties, but there is no x,y attribute.

The Event.pagex in Firefox is equivalent to the event.x in IE

Workaround: Event.x = event.x? Event.x:event.pagex;

Other:

Event.layerx in IE and Firefox, there is no difference between the specific meaning has not yet been tested.

4. The ID of an HTML object as an object name problem

Problem:

In IE, the ID of an HTML object can be used directly as a document's subordinate object variable name, but not in Firefox.

Workaround:

The Unification uses getElementById ("Idname") instead of Idname as an object variable.

5. Obtaining an object with a idname string

Problem:

In IE, the use of eval (idname) can get an HTML object with an ID of idname, but not in Firefox.

Workaround:

Unified use of getElementById (idname) instead of eval (idname)

6. Variable name and an HTML object ID the same problem

Problem:

The ID of an HTML object in IE can be used directly as a subordinate object variable name of document, while Firefox cannot. In Firefox, use the same variable name as the HTML object ID;

Workaround:

Uniform use of document.getElementById ("Idname") instead of Document.idname

When declaring a variable, VAR is added to avoid ambiguity.

In addition, it is best not to take variable names that are the same as the HTML object IDs to reduce errors.

8. Frame problem

Problem:

In IE, you can use Window.testframe to get the frame, but not Firefox.

Workaround:

The main differences between Firefox and IE in the use of frame are:

<frame src= "xx.htm" id= "Frameid" name= "FrameName"/>

IE can access the Window object for this frame by ID or name

Firefox can only access this frame's window object through name

If the frame tag above is written in the HTM inside the top-level window, you can access the

Ie:window.top.frameid or Window.top.framename to access this window object

Firefox: This is the only way to access this window object Window.top.framename

In addition, Window.top.document.getelementbyid ("Frameid") can be used in both Firefox and IE to access the frame label

And you can switch the contents of the frame by Window.top.document.getelementbyid ("Testframe"). src = ' xx.htm '.

You can also switch the contents of a frame by window.top.framename.location = ' xx.htm '

9. In Firefox, the attributes that you define must be getattribute ()

Add event for Dlg object under if (document.all) {//ie
Dlg.setattribute ("onmousedown", function () {move_div (this);});
Add event for Dlg object under}else{//firefox
Dlg.setattribute ("onmousedown", "move_div (this);");
}

10. There is no parentelement children in Firefox with ParentNode ChildNodes

ChildNodes the meaning of the subscript in IE and Firefox are different, Firefox using the DOM specification, ChildNodes will insert a blank text node----Firefox childnodes will be the line and white space characters are counted as the parent node of the child node, And the childnodes and children of IE will not.

It is generally possible to avoid this problem by Node.getelementsbytagname ().

When the nodes in HTML are missing, IE and Firefox have different explanations for parentnode, such as

<form>

<table>

<input/>

</table>

</form>

The value of Input.parentnode in Firefox is form, and the value of Input.parentnode in IE is an empty node

Firefox nodes do not have Removenode method, you must use the following methods Node.parentnode.removechild (node)

11.const problem

Problem:

The Const keyword cannot be used in IE. such as const CONSTVAR = 32; This is a syntax error in IE.

Method:

Do not use const instead of Var.

A. Body Object

The body of the Firefox body tag is not fully read by the browser before the existence, and IE must be completely read in the body after the existence of

URL encoding

In JS if the write URL to write directly & do not use &amp;

If the var url = ' xx.jsp tutorial? objectname=xx&amp;objectevent=xxx ';

Then frm.action = URL, the URL is likely to not be normal display so that the parameters are not correctly uploaded to the server, the general server error parameters are not found.

Exceptions in TPL, of course, because the TPL conforms to the XML specification and requires & write as &amp;

General Firefox does not recognize the &amp; in JS

NodeName and tagname issues

Problem:

In Firefox, all nodes have nodename values, but textnode do not have tagname values. In IE, the use of nodename seems to be problematic.

Workaround:

Use tagname, but you should detect if it is empty.

Input.type Property Problem

IE under the Input.type property is read-only, but Firefox can be modified

Problems with Document.getelementsbyname () and Document.all[name]

Problem:

In IE, Getelementsbyname (), Document.all[name] can not be used to obtain DIV elements (whether there are other elements that cannot be taken is unknown).

17.event.srcelement problem

Problem: Under IE, the even object has a srcelement attribute, but there is no target attribute; Under Firefox, the even object has the target attribute, but there is no srcelement attribute.

Workaround: Use obj (obj = event.srcelement event.srcelement:event.target) to replace the event.srcelement under IE or the event.target under Firefox

18. Modal and non modal window problems

Problem: under IE, modal and modeless windows can be opened by ShowModalDialog and showModelessDialog, but not under Firefox.

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.

For example: var parentwin = Window.opener;

Parentwin.document.getelementbyid ("aqing"). Value = "aqing";

19. Event Delegate Method

Ie:document.body.onload = inject; function inject () was implemented prior to this
Firefox:document.body.onload = inject ();
Some say the standard is: document.body.onload=new function (' inject () ');

The difference between Firefox and the parent element of IE (parentelement)

Ie:obj.parentelement
Firefox:obj.parentnode
Workaround: Because both Firefox and IE support DOM, using Obj.parentnode is a good choice.

21.cursor:hand vs Cursor:pointer

Firefox does not support hand, but IE supports pointer
Workaround: Unify the use of pointer

22.innertext works well in IE, but innertext is not available in Firefox.

Workaround:
if (Navigator.appname.indexof ("explorer") >-1) {

document.getElementById (' element '). innertext = "my text";

} else{

document.getElementById (' element '). Textcontent = "my text";

}

The statements in Firefox that resemble obj.style.height = Imgobj.height are not valid

Solution: Obj.style.height = imgobj.height + ' px ';

Ie,firefox and other browsers for table label operations are different, in IE does not allow the table and TR innerHTML assignment, using JS to add a TR, the use of Appendchile method does not use.

WORKAROUND://Append a blank line to table
var row = Otable.insertrow (-1);
var cell = document.createelement ("TD");
cell.innerhtml = "";
Cell.classname = "XXXX";
Row.appendchild (cell);

Question of padding

Firefox cannot explain padding 5px 4px 3px 1px shorthand and must be changed to padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

26. Elimination of UL, OL and other lists of indentation

Style should be written: list-style:none;margin:0px;padding:0px;
Where the margin property is effective for IE, the padding attribute is effective for Firefox

CSS Tutorial Transparent

Ie:filter:progid:dximagetransform.microsoft.alpha (style=0,opacity=60)
firefox:opacity:0.6

CSS rounded Corners

IE: round corners are not supported.
Firefox:-moz-border-radius:4px, or-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;- moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;

CSS double-line beveled border

IE:BORDER:2PX outset;
Firefox:-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:# 404040 #808080;-moz-border-bottom-colors: #404040 #808080;

30.window.location.href problem

     problem: under IE or firefox2.0.x, you can use window.location or window.location.href; Under firefox1.5.x, you can only use window.location