The different performance of JavaScript in IE and Firefox

Source: Internet
Author: User
Tags define definition empty eval variables tagname variable access
Javascript

1. Object Problem

1.1 Form Object
Existing issues:
Existing code this gets the form object through the Document.forms ("FormName"), so that the use in IE can be accepted, MF cannot.
Workaround:
Instead, use as the subscript operation. Change to Document.forms["FormName"]
Note
The above used as the formname in the subscript operation is ID and name

1.2 HTML Object
Existing issues:
In IE, the ID of an HTML object can be used directly as the subordinate object variable name of document. Not in MF.
document.all ("ItemName") or document.all ("ItemId")
Workaround:
Use object ID as object variable name
document.getElementById ("ItemId")
Note
Document.all is a method of IE customization, so please try not to use it.
There is also a way in which both IE and MF can be used
var f = document.forms["FormName"];
var o = f. itemId;

1.3 Div Object
Existing issues:
In IE, div objects can be used directly using IDs as object variable names. Not in MF.
DivId.style.display = "None"
Workaround:
document.getElementById ("divID"). Style.display = "None"
Note
The method of obtaining an object, whether it is a Div object or not, uses the getElementById method. See also 1.2

1.4 About Frame
Existing issues
In IE, you can use Window.testframe to get the FRAME,MF.
Solving method
The main differences between MF and IE in the use of frame are:
If the following attributes are written in the frame label:

Then IE can access the Window object for this frame by ID or name
MF can only access the window object of this frame through name
For example, if the frame tag 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
MF: Only so window.top.frameName to access this window object
In addition, Window.top.document.getElementById ("Frameid") can be used in both MF 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 '

1.5 windows
Existing issues
In IE, modal and modeless windows can be opened via ShowModalDialog and showModelessDialog, but MF is not supported.
Solutions
Open a new window directly using the window.open (Pageurl,name,parameters) method.
If you need to pass parameters, you can use a frame or an IFRAME.

2. Summary
2.1 When defining various object variable names in JS, use IDs as much as possible to avoid using name.
In IE, the ID of an HTML object can be used directly as the subordinate object variable name of document. Not in MF, so try to use IDs when you normally use them, avoiding using only name instead of IDs.

2.2 Problem with a variable name that is the same as an HTML object ID
Existing issues
In MF, because the object ID is not the name of an HTML object, you can use the same variable name as the HTML object ID, which is not available in IE.
Solving method
In the declaration of variables, all add Var, to avoid ambiguity, so that in IE can also be normal operation.
In addition, it is best not to take variable names that are the same as the HTML object IDs to reduce errors.

1. document.all
Firefox can be compatible with document.all, but generates a warning. You can use getElementById ("*") or Getelementbytagname ("*") to replace
However, for attributes such as document.all.length, they are completely incompatible.
2. parentelement
This is also incompatible. For example, Obj.parentElement.name should be changed to Obj.parentNode.attributes.getNamedItem ("name"). NodeValue (don't know how to write more succinctly)
3. Event
The windows.event is not supported by the Consortium
Say:
In IE inside

.....

function Onmenuclick ()
{
Collapsemenu (event.srcelement);
}
Work properly. But in Firefox, it's changed to:

function Onmenuclick (EVT)
{
if (evt = null)
EVT = window.event; For IE
var srcelement = evt.srcelement? Evt.srcElement:evt.target; IE uses srcelement, while Firefox uses target
Collapsemenu (srcelement);
}

The difference between IE and Firefox in parsing CSS
The resolution of the height
IE: Will vary according to the height of the content, including undefined height of the picture content, even if the definition of height, when the content exceeds the height, will use the actual height

Firefox: When no height is defined, if the content includes the content of the picture, MF's high resolution is based on the printing standard, which will cause and the actual content is highly incompatible with the situation; When the height is defined, but the content exceeds the height, the content goes beyond the defined height, but the style used by the zone does not change. Create a pattern dislocation.

Conclusion: We can determine the content of the height of the best definition of height, if there is no way to define the height, it is best not to use the border style, otherwise the style will certainly appear chaos!

An analysis of the IMG object ALT and Title
Alt: When the photo does not exist or the load error prompts;

Title: Tip Description of the photo.

If Title,alt is not defined in IE, it can also be used as a tip for IMG, but in MF, both are used exactly as defined in the standard

Conclusion: When we define the IMG object, we will write all the ALT and title objects, so that we can use them in all kinds of browsers.

Other details of the difference

When you are writing CSS, especially with float:left (or right) to arrange a picture, you will find in Firefox inside normal and IE there are problems. Whether you use margin:0, or border:0 to restrain, it is no avail.

In fact, there is another problem, ie for the space processing, Firefox is ignored and ie for blocks and blocks between the space is handled. That is to say a div after the end of a div write, the middle do not have a carriage return or space. Otherwise, there may be problems, such as the deviation of 3px, and the reason is difficult to find.

It was unfortunate that I ran into the problem of multiple IMG tags attached and then defined the Float:left, hoping that the images could be connected. But the result is normal inside Firefox and every img shown in IE is 3px apart. I have no effect on removing all the spaces between the labels.

Later, the solution is to set Li on the outside of IMG and define margin:0 for Li, which solves the display deviation of IE and Firefox. IE for some models of interpretation will produce a lot of error problems, only a lot of try to find out why.

This is just a few simple differences, in the layout and CSS design can be considered, but the most effective and simple to solve the compatibility problem or use Table table, the table in the compatibility of a good performance.

In addition, in the template of JS design also need to consider both the compatibility of the code, the following is a few of the IE and Firefox JS Test:

following IE instead of Internet Explorer, MF replaces Mozilla Firefox

1. Document.form.item question
(1) Existing problems:
There are many Document.formName.item ("itemname") statements in existing code that cannot be
Run under MF
(2) Solution:
Switch to document.formname.elements["ElementName"]
(3) Other
See also 2

2. Collection Class object problem
(1) Existing problems:
Many collection class objects in existing code use (), IE can accept, MF cannot.
(2) Solution:
Use [] as the subscript operation instead. For example: Document.forms ("FormName") instead
document.forms["FormName"].
Also as follows: Document.getelementsbyname ("InputName") (1) Read
Document.getelementsbyname ("InputName") [1]
(3) Other

3. window.event
(1) Existing problems:
Unable to run on MF using window.event
(2) Solution:
MF event can only be used at the scene of the incident, this problem can not be resolved. You can do this:
Original code (can run in IE):

/>
...
<script language= "JavaScript" >
function Gotosubmit () {
...
alert (window.event); Use window.event
...
}
</script>

New code (can run in IE and MF):

/>
...
<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 in the new code does not change, the same as the old code (that is, the gotosubmit call does not give
parameter), you can still run it only in IE, but not in error. So the TPL part of this program is still with the old
Code compatibility.

///////////////////////////////////////////////////////////////////////
Following from the Netizen Llihua
Event handler function
function A (evt) {//firefox
EVT = evt? Evt:window.event; Ie
var Srcelem = (evt.target)? Evt.target:evt.srcElement;
Event handling ...
}

When you connect an event handler, you can use the inline HTML method, or you can use the
Property method definition.

1, the use of inline HTML method, such as:

>

Attention:
(1) JavaScript can not be province;
(2) The argument is to use event, and the parameters can be used (e.g. evt, event, etc.);

2, use the event property method to bind the incident handler function, such as:
Document.form2.radio[0].onclick = A;
Above from Netizen Llihua
///////////////////////////////////////////////////////////////////////

4. The ID of an HTML object as an object name problem
(1) Existing problems
In IE, the ID of an HTML object can be used directly as the subordinate object variable name of document. In
MF cannot.
(2) Solving method
Use getElementById ("Idname") instead of Idname as an object variable.

5. Obtaining an object with a idname string
(1) Existing problems
In IE, eval (idname) can be used to obtain an HTML object with an ID of idname, which in MF does not
Yes.
(2) Solving method
Replace eval (idname) with getElementById (Idname).

6. Variable name and an HTML object ID the same problem
(1) Existing problems
In MF, because the object ID is not the name of an HTML object, you can use the HTML object
Variable names with the same ID, IE cannot.
(2) Solving method
In the declaration of variables, all add Var, to avoid ambiguity, so that in IE can also be normal operation.
In addition, it is best not to take variable names that are the same as the HTML object IDs to reduce errors.
(3) Other
See question 4

7. Event.x and EVENT.Y issues
(1) Existing problems
In IE, the event object has an X, y attribute, which is not in MF.
(2) Solving method
In MF, the equivalent of Event.x is Event.pagex. But Event.pagex ie did not.
Therefore, the use of Event.clientx instead of event.x. This variable is also available in IE.
There is a subtle difference between event.clientx and Event.pagex (when the entire page has a scroll bar),
But most of the time it is equivalent.

If you want to be exactly the same, you can be a little more troublesome:
MX = Event.x? Event.x:event.pagex;
And then use MX instead of event.x.
(3) Other
Event.layerx in IE and MF, the specific meaning of the difference has not yet been tested.

8. About Frame
(1) Existing problems
In IE, you can use Window.testframe to get the FRAME,MF.
(2) Solving method
The main differences between MF and IE in the use of frame are:
If the following attributes are written in the frame label:
<frame src= "xx.htm" id= "Frameid" name= "FrameName"/>
Then IE can access the Window object for this frame by ID or name
MF can only access the window object of this frame through name
For example, if the frame tag 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
MF: Only so window.top.frameName to access this window object

In addition, both MF and IE can be used
Window.top.document.getElementById ("Frameid")
To access
Frame label
and can pass
Window.top.document.getElementById ("Testframe"). src = ' xx.htm '
To toggle the contents of the frame
You can also switch the contents of a frame by window.top.frameName.location = ' xx.htm '
A description of frame and window can be found in the ' window and frame ' article of BBS
And the test below the/test/js/test_frame/directory.
----Adun 2004.12.09 Revision

9. In MF, the attribute defined by itself must be getattribute () to obtain
10. No parentelement Parement.children in Mf
ParentNode Parentnode.childnodes
ChildNodes the meaning of subscript is different in IE and MF, MF uses DOM specification, ChildNodes inserts blank
The text node.
It is generally possible to avoid this problem by Node.getelementsbytagname ().
When nodes in HTML are missing, IE and MF have different interpretations of parentnode, such as

The value of Input.parentnode in MF is form, while the value of Input.parentnode in IE is an empty node

There is no Removenode method for nodes in MF, you must use the following methods
Node.parentNode.removeChild (node)

11.const problem
(1) Existing problems:
The Const keyword cannot be used in IE. such as const CONSTVAR = 32;
This is a syntax error in IE.
(2) Solution:
Do not use const instead of Var.

A. Body Object
MF body in the body tag is not fully read by the browser before the existence, and IE must be completely read in the body
Before they exist.

URL encoding
In JS if the write URL directly write & Do not write & for example
var url = ' xx.jsp?objectname=xx&objectevent=xxx ';
Frm.action = URL It is likely that the URL will not be displayed properly so that the parameter is not uploaded to the server correctly
General Server error parameter not found
Of course, if the exception is in the TPL, because the TPL conforms to the XML specification, the requirement & write as &
General MF cannot recognize the & in JS

NodeName and TagName issues
(1) Existing problems:
In MF, all nodes have nodename values, but textnode do not have tagName values. In IE,
The use of nodename is as good as
There is a problem (the situation is not tested, but my IE has been dead several times).
(2) Solution:
Use TagName, but you should detect if it is empty.

15. Element attributes
IE under the Input.type property is read-only, but MF can be modified

Problems with Document.getelementsbyname () and Document.all[name]
(1) Existing problems:
In IE, Getelementsbyname (), Document.all[name] cannot be used to obtain DIV elements
(whether there are other elements that cannot be taken is unknown).

DOM Data Island Issues
(1) Existing problems
In IE,



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.