Compatibility between JavaScript IE and Firefox

Document. Form. ItemProblem

Existing problems:

ExistingCodeThere are manyDocument. formname. Item ("itemname ")Such statements cannot be run in Firefox.

Solution:

SwitchDocument. formname. elements ["elementname"].

Collection Object Problems

Existing problems:

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

Solution:

Use [] as the subscript operation.

For example:Document. Forms ("formname ")ChangeDocument. Forms ["formname"].

Another example:Document. getelementsbyname ("inputname") (1)ChangeDocument. getelementsbyname ("inputname") [1]

Window. Event

Existing problems:

UseWindow. EventCannot run on Firefox

Solution:

Mf events can only be performedThe problem cannot be solved. YesThis is an alternative:

Original code(You canIERunning):

 

<Input type = "button" name = "somebutton" value = "Submit" onclick = "javascript: gotosubmit ()"/> <script language = "JavaScript"> function gotosubmit () {alert (window. event); // use window. event} </SCRIPT>
 

 

 New Code(You canIEAndMfRunning):

 

 
<Input type = "button" name = "somebutton" value = "Submit" onclick = "javascript: gotosubmit (Event) "/> <script language =" JavaScript "> function gotosubmit (EVT) {EVT = EVT? EVT: (window. event? Window. Event: NULL); alert (EVT); // use EVT} </SCRIPT>
 

 

 In addition, if the first line of the new Code is not changed, it is the same as the old code.(That isGotosubmitNo parameters are provided for the call.), You can onlyIE. Therefore, this solutionTPLSome are still compatible with the old code.

HtmlQuestion about Object ID as 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. Not in Firefox.

Solution:

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

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 ).

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, add VaR to 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.

Event. xProblem with event. Y

Existing problems:

In ie, the event object has the X and Y attributes, and MF does not.

Solution:

In MF, event. X is equivalent to event. pagex. But event. pagex IE does not. Therefore, event. clientx is used instead of event. X. This variable is also available in IE. Event. clientx is slightly different from event. pagex (when the page has a scroll bar), but most of the time it is equivalent. If it is the same, it may be a little troublesome:
MX = event. X? Event. X: event. pagex;
Use MX instead of event. X.

Others: event. layerx is available in both IE and MF. The significance of event. layerx has not been tested yet.

Pay attention to the differences between x and y in CSS, which may not be supported in Firefox. For example, backgroundpositionx and backgroundpositiony Firefox are not supported.

 

About Frame

Existing problems:

In ie, the frame can be obtained using window. testframe, but not in MF.

Solution:

The main difference between MF and IE in frame usage is that if the following attributes are written in the frame tag:
<Frame src = "xx.htm" id = "frameid" name = "framename"/>
Then Ie can access the window object corresponding to this frame through ID or name. MF can only access the window object corresponding to this frame through name. For example, if the above frame label is written in the HTM in the top window, you can access it as follows:
IE: window. Top. frameid or window. Top. framename to access this window object
Mf: only window. Top. framename can access this window object.

In addition, you can access the frame tag using mongotop.doc ument. getelementbyid ("frameid") in both mfand ie. In addition, you can switch the frame content by using the parameter top.doc ument. getelementbyid ("testframe"). src = 'xx.htm. You can also switch the frame content through window. Top. framename. Location = 'xx.htm. For details about frame and window, see 'window and framework' in BBS'Article. And the tests under the/test/JS/test_frame/directory.

Custom Attributes

In MF, the defined attributes must be obtained by getattribute ().

Parentelement parement. Children

There is no parentelement parement. Children in MF. Parentnode. childnodes is used.

Childnodes has different meanings in IE and MF. MF uses Dom specifications, and blank text nodes are inserted in childnodes. You can avoid this problem by using node. getelementsbytagname. When a node in HTML is missing, ie and MF have different interpretations of parentnode, for example:

<Form> <Table> <input/> </table> </form>

In MF, the value of input. parentnode is form, while that of input. parentnode in IE is empty. The node in MF does not have the removenode method. You must use the following method: node. parentnode. removechild (node ).

ConstProblem

Existing problems:

You cannot use the const keyword in IE. For example, const constvar = 32; in IE, This Is A syntax error.

Solution:

Use VaR instead of Const.

BodyObject

The MF body exists before the body tag is fully read by the browser, While IE exists only after the body is fully read.

URL Encoding

Existing problems:

In JS, if the URL is written, write directly & do not write & for example, VAR url = 'xx. jsp? Objectname = XX & objectevent = XXX ';

If frm. Action = URL, it is very likely that the URL will not be properly displayed so that the parameter is not correctly transmitted to the server. In general, the server reports that the error parameter is not found. Of course, if it is an exception in TPL, because TPL complies with the XML specification and requires & writing as & generally, MF cannot identify &

NodenameAnd tagname

Existing problems:

In MF, all nodes have a nodename value, but textnode does not have a tagname value. In IE, nodename usage seems to be problematic (I have not tested it but I have already died several times ).

Solution:

Use tagname, but check whether it is empty.

Element attributes

The input. Type attribute in IE is read-only, but can be modified in MF.

Document. getelementsbyname ()And document. All [name] Problems

In IE, neither getelementsbyname () nor document. All [name] can be used to obtain the DIV element (whether there are other elements that cannot be retrieved is unknown ).

Solution:

 

Object problem: form object

Existing problems:

The existing code obtains the form object through document. Forms ("formname"), which is acceptable in IE and not in MF.

Solution:

Use as subscript. Change to document. Forms ["formname"]
Note: In the subscript calculation, formname is ID and name.

Object problem: HTML Object

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. Document. All ("itemname") or document. All ("Itemid ")

Solution:

Use the Object ID as the object variable name document. getelementbyid ("Itemid ")
Note: Document. All is an ie-defined method, so try not to use it. There is also a way to use both IE and MF:
VaR F = Document. Forms ["formname"];
VaR o = f. Itemid;

Object problem: div object

Existing problems:

In ie, the DIV object can use ID directly as the object variable name. It cannot be in MF. For example, divid. style. Display = "NONE"

Solution:

Document. getelementbyid ("divid"). style. Display = "NONE"

Object question: About Frame

Existing problems:

In ie, the frame can be obtained using window. testframe, but not in MF.

Solution:

The main difference between MF and IE in frame usage is that if the following attributes are written in the frame tag:
<Frame src = "xx.htm" id = "frameid" name = "framename"/> Ie can access the window object corresponding to the frame by ID or name, MF can only access the window object corresponding to this frame through name. For example, if the above frame label is written in the HTM in the top window, you can access it as follows:
IE: window. Top. frameid or window. Top. framename to access this window object
Mf: only window. Top. framename can access this window object.
In addition, you can use zookeeper top.doc ument in both mfand ie. getelementbyid ("frameid") to access the frame tag. getelementbyid ("testframe "). src = 'xx.htm' to switch the frame content, you can also use window. top. framename. location = 'xx.htm' to switch the frame content.

Object problem: Window

Existing problems:

In IE, you can use showmodaldialog and showmodelessdialog to open modal and non-modal windows, but MF does not.

Solution:

Use window. Open (pageurl, name, parameters) to open a new window. If you want to pass parameters, you can use frame or IFRAME.

Summary

When defining various object variable names in JS, use ID whenever possible to avoid using name. 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 used in MF. Therefore, use ID whenever possible to avoid using only name instead of ID.

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, add VaR to 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.

Document. All

Firefox is compatible with document. All, but generates a warning. You can use getelementbyid ("*") or getelementbytagname ("*) instead. However, attributes such as document. All. length are completely incompatible.

Parentelement

This is also incompatible. For example, obj. parentelement. name should be changed to OBJ. parentnode. Attributes. getnameditem ("name"). nodevalue (I don't know how to write it more concisely)

Event

W3C does not support windows. for example, in IE: <Div class = "menu" id = "menu" onclick = "onmenuclick ();"> ..... </div>
Function onmenuclick ()
{
Collapsemenu (event. srcelement );
}
Working properly. But in Firefox, it is changed:
<Div class = "menu" id = "menu" onclick = "onmenuclick (event);">
Function onmenuclick (EVT)
{
If (EVT = NULL)
EVT = Window. event; // for IE
VaR srcelement = EVT. srcelement? EVT. srcelement: evt.tar get; // ie uses srcelement, while Firefox uses target
Collapsemenu (srcelement );
}

Innertext

Existing problems:

Supported by IE, not supported by Firefox

Solution:

Innerhtml is used. Both browsers recognize innerhtml.

Document. createelement

Existing problems:

Supported by Firefox (except IE, supported by all browsers now), not by IE

Solution:

No need to setattribute ('style', 'color: red ')
Use object.style.css text = 'color: red; '(this is also an exception)

Class

Existing problems:

Setattribute ('class', 'styleclass') supported by Firefox and not supported by IE (the specified attribute name is class, and IE does not set the class attribute of the element, on the contrary, ie automatically identifies the classname attribute only when setattribute is used)

Solution:

Setattribute ('class', 'styleclass ')
Setattribute ('classname', 'styleclass ')

Set events with setattribute

Existing problems:

VaR OBJ = Document. getelementbyid ('objid ');
OBJ. setattribute ('onclick', 'funcitonname (); '); supported by Firefox, not supported by IE

Solution:

In ie, the vertex method must be used to reference the required event processing.ProgramAnd assign the anonymous function as follows: var OBJ = Document. getelementbyid ('objid ');
OBJ. onclick = function () {fucntionname () ;}; this method is supported by all browsers.

Create a radio button

Browsers other than IE:
VaR rdo = Document. createelement ('input ');
Rdo. setattribute ('type', 'Radio ');
Rdo. setattribute ('name', 'radiobtn ');
Rdo. setattribute ('value', 'checked ');

Common skills

When an input element is dynamically created, it is generally first added and then set the type. This may cause errors. Should:
VaR BTN = Document. createelement ('input ');
BTN. setattribut ('type', 'click ');
Document. getelementbyid ('formid '). appendchild (BTN );