Javascript compatibility Summary (ie/ff)

In the following example, Internet Explorer is replaced by IE, and mozzila Firefox is replaced by MF/ff.

(1) window. Event

IE: window. event object

FF: There is no window. event object. You can pass the event object to the function parameters. For example, onmousemove = domousemove (Event)

(2) current mouse Coordinate

IE: event. X and event. Y.

FF: event. pagex and event. Pagey.

Generic: both have the event. clientx and event. clienty attributes.

(3) The current coordinates of the mouse (plus the scroll bar rolling distance)

IE: event. offsetx and event. offsety.

FF: event. layerx and event. layery.

(4) event. srcelement

Note:

IE: The event 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 OBJ (OBJ = event. srcelement? Event. srcelement: event.targettoken used to replace event.tar get under event.srcelement?firefox.

Event compatibility issues.

(5) event. toelement

Problem: 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:

VaRTarget = E. relatedtarget | E. toelement;

(6) coordinates of X and Y of the tag: style. posleft and style. postop

IE: Yes.

FF: No.

Generic: object. offsetleft and object. offsettop.

(7) form height and width

IE: Document. Body. offsetwidth and document. Body. offsetheight. Note: The page must have a body tag.

FF: always specify innerwidthand always specify innerhegihtto use document.documentelement.clientwidthand document.doc umentelement. clientheight.

Generic: Document. Body. clientwidth and document. Body. clientheight.

(8) add events

IE: element. attachevent ("onclick ",Function);.

Element. detachevent ("onclick ",Function);

Event execution sequence: Stack (first-in-first-out)

FF: element. addeventlistener ("click ",Function,True).

Element. removeeventlistener ('click ',Function, true).

Event execution sequence: Queue (first-in-first-out)

Usage: element. onclick =Function. Although the onclick event can be used, the effect of onclick is different from that of the above two methods. onclick only executes one process, while attachevent and addeventlistener execute one process list, that is, multiple processes. For example, both func1 and func2 are executed in element. attachevent ("onclick", func1); element. attachevent ("onclick", func2.

(9) Custom Attributes of tags

IE: If you define an attribute value for the label div1, you can obtain this value using div1.value and div1 ["value.

FF: div1.value and div1 ["value"] cannot be used.

General purpose: div1.getattribute ("value ").

(10) document. Form. Item Problems

IE: an existing problem: many statements such as document. formname. Item ("itemname") exist in the existing code and cannot be run in MF.

FF/ie: Document. formname. elements ["elementname"]

(11) collection/array objects

. Existing problems:

In the existing Code, many collection class objects are used (), which is acceptable to IE and cannot be used by MF.

. Solution:

Use [] as the subscript operation. For example, change document. Forms ("formname") to document. Forms ["formname"].

For example, change document. getelementsbyname ("inputname") (1) to document. getelementsbyname ("inputname") [1]

(12) question about the ID of an HTML object as the object name

. Existing Problems

In ie, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. It cannot be in MF.

. Solution

Use getelementbyid ("idname") instead of idname as the object variable

(13) How to get an object using the idname string

. Existing Problems

In IE, Eval (idname) can be used to obtain the HTML object with ID as idname, which cannot be used in MF.

. Solution

Use getelementbyid (idname) instead of eval (idname ).

(14) The variable name is the same as the ID of an HTML object.

. Existing Problems

In MF, because the Object ID is not the name of the HTML object, you can use the same variable name as the HTML Object ID, which cannot be used in IE.

. Solution

When declaring variables, always addVaRTo avoid ambiguity, so that it can run normally in IE.

In addition, it is best not to take the same variable name as the HTML Object ID to reduce errors.

(15) document. getelementsbyname () and document. All [name] Problems

Existing problems: in IE, getelementsbyname () and document. All [name] cannot be used to obtain DIV elements (whether there are other elements that cannot be retrieved is unknown ).

(16) document. All

Firefox is compatible with document. All, but generates a warning. You can use getelementbyid ("*") or getelementbytagname ("*") to replace

However, attributes such as document. All. length are completely incompatible.

(17) Input. Type attribute Problems

Description: The input. Type attribute in IE is read-only, but the input. Type attribute in Firefox is read/write.

(18) window. Location. href

Note: 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.

(19) modal and non-modal window Problems

Note: in IE, you can use showmodaldialog and showmodelessdialog to open modal and non-modal windows. In Firefox, you cannot

Solution: Use window. Open (pageurl, name, parameters) to open a new window.

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. For example:VaRParwin = Window. opener; parwin.doc ument. getelementbyid ("aqing"). value = "aqing ";

(20) frame Problems

The following frame is used as an example:

<Frame src = "xxx.html" mce_src = "xxx.html" id = "frameid" name = "framename"/>

1. Access the frame object:

IE: Use window. frameid or window. framename to access this frame object. frameid and framename can have the same name.

FF: only window. framename can be used to access this frame object.

In addition, both ieand firefoxcan access this frame object by using the upload metadata Doc ument. getelementbyid ("frameid.

2. Switch frame content:

Both ie' and firefox' can be switched by using unzip upload Doc ument. getelementbyid ("testframe"). src = "xxx.html" or window. framename. Location = "xxx.html ".

Change the frame content.

If you need to return the parameters in the frame to the parent window (note that it is not opener but parent frame), you can use parent in frme to access the parent window. For example:

Required parameter parent.doc ument. form1.filename. value = "aqing ";

(21) Body Problem

The body of Firefox exists before the body tag is fully read by the browser. The body of IE must exist only after the body tag is fully read by the browser.

(21) event delegation Method

IE: Document. Body. onload = inject; // function inject () has been implemented before this

FF: Document. Body. onload = inject ();

(22) differences between Firefox and IE parent elements (parentelement)

IE: obj. parentelement

FF: obj. parentnode

Solution: because both ff and IE support DOM, using obj. parentnode is a good choice.

(23) innertext works properly in IE, but innertext does not work in Firefox. textcontent is required.

(24) when setting the HTML Tag style in Firefox, the values of all positional and font sizes must be followed by PX. This IE is also supported

(25) parent node, child node, and delete node

IE: parentelement, parement. Children, element. romovenode (True).

FF: parentnode, parentnode. childnodes, node. parentnode. removechild (node ).

(26) operations on the Select Options set

Apart from [], selectname. Options. Item () can also be used for enumeration elements. In addition, selectname. Options. length, selectname. Options. Add/Remove can be used in both browsers.

.

Note that the element is assigned after the add operation. Otherwise, the Operation will fail.

Dynamically delete all options in the SELECT statement:

Document. getelementbyid ("ddlresourcetype"). Options. Length = 0;

Dynamically delete an option in the SELECT statement:

Document. getelementbyid ("ddlresourcetype"). Options. Remove (indx );

Dynamically Add the option in the SELECT statement:

Document. getelementbyid ("ddlresourcetype"). Options. Add (NewOption (text, value ));

General methods for ie ff dynamic deletion:

Document. getelementbyid ("ddlresourcetype"). Options [indx] =Null;

(27) Capture events

Problem: FF does not have the setcapture () and releasecapture () Methods

Solution:

IE: obj. setcapture (); obj. releasecapture ();

FF:

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);   window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);   if (!window.captureEvents) {          o.setCapture();   }else {          window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);   }   if (!window.captureEvents) {          o.releaseCapture();   }else {          window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);   }   

　　

(28) prohibit the selection of webpage content

Problem: FF needs to be disabled by CSS, and IE is forbidden by Js.

Solution:

IE: obj. onselectstart =Function(){Return False;}

FF:-moz-user-select: none;

(29) Drawing

IE: VML.

FF: SVG.

(30) CSS: transparent

IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).

FF: opacity: 0.6.

(31) CSS: rounded corner

IE: rounded corners are not supported.

FF:-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 ;.