Javascript ie Firefox compatibility

Javascript ie Firefox compatibility

Article category: Web Front-end

Internet Explorer is replaced by IE and mozzila Firefox is replaced by MF.
0. PX Problems
OBJ. style. Left = "100px ";
OBJ. style. Top = "100px ";
Remember to write PX; otherwise, the two statements on Firefox are invalid !!

1. Document. Form. Item Problems
(1) existing problems:
Many statements such as document. formname. Item ("itemname") exist in the existing code and cannot be run in MF.
(2) solution:
Use document. formname. elements ["elementname"]
(3) Others
See 2

2. Collection class Object Problems
(1) existing problems:
In the existing Code, many collection class objects are used (), which is acceptable to IE and cannot be used by MF.
(2) solution:
Use [] as the subscript operation. For example, change document. Forms ("formname") to document. Forms ["formname"].
Another example is: Document. getelementsbyname ("inputname") (1) changed to document. getelementsbyname ("inputname") [1]
(3) Others

3. Window. Event
(1) existing problems:
Window. event cannot be run on MF.
(2) solution:
Mf events can only be used in the event. This problem cannot be solved. This can be changed as follows:
Original code (can be run in IE ):
<Input type = "button" name = "somebutton" value = "Submit" onclick = "javascript: gotosubmit ()"/>
...
<Script language = "JavaScript">
Function gotosubmit (){
...
Alert (window. Event); // use window. Event
...
}
</SCRIPT>
New Code (run in IE and MF ):
<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 modified, it is the same as the old code (that is, the gotosubmit call does not provide a parameter), it can only be run in IE, but no error occurs. Therefore, the TPL part of this solution is still compatible with the old code.

4. Question about the ID of an HTML object as the object name
(1) 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.
(2) Solution
Use getelementbyid ("idname") instead of idname as the object variable.

5. The problem of getting an object using the idname string
(1) Existing Problems
In IE, Eval (idname) can be used to obtain the HTML object with ID as idname, which cannot be used in MF.
(2) Solution
Use getelementbyid (idname) instead of eval (idname ).

6. The variable name is the same as the ID of an HTML object.
(1) 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.
(2) 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.
(3) Others
See question 4

7. event. X and event. Y
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.
(1) Existing Problems
In ie, the event object has the X and Y attributes, and MF does not.
(2) 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
(3) Others
Event. layerx is available in both IE and MF. There is no difference in the specific significance of this function.

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

IE: event. offsetx and event. offsety.
FF: event. layerx and event. layery.

9. Coordinates of tag X and Y: style. posleft and style. postop

IE: Yes.
FF: No.
Generic: object. offsetleft and object. offsettop.

10. height and width of the form

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.

11. Add events

IE: element. attachevent ("onclick", func );.
FF: element. addeventlistener ("click", func, true ).
Generic: element. onclick = func. 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, element. attachevent ("onclick", func1); element. attachevent ("onclick", func2) will be executed in both func1 and func2.

12. 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: you cannot use div1.value or div1 ["value.
General purpose: div1.getattribute ("value ").

13. parent node, child node, and delete node

IE: parentelement, parement. Children, element. romovenode (true ).
FF: parentnode, parentnode. childnodes, node. parentnode. removechild (node ).

14. Drawing

IE: VML.
FF: SVG.

15. CSS: transparent

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

16. 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 ;.

17. CSS: double-line concave and convex border

IE: Border: 2px outset ;.
FF:-moz-border-top-colors: # d4d0c8 white;-moz-border-left-colors: # d4d0c8 white;-moz-border-right-colors: #404040 #808080;-moz-border-bottom-colors: #404040 #808080 ;.

18. 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:
If the following attributes are written in the frame tag:

Then Ie can access the window object corresponding to this frame through ID or name.
However, 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
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, both mfand iecan use javasdesktop.doc ument. getelementbyid ("frameid") to access the frame tag.
In addition, you can switch the frame content through the parameter top.doc ument. getelementbyid ("testframe"). src = 'xx.htm '.
You can also switch the frame content through window. Top. framename. Location = 'xx.htm '.

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

20. High Resolution
IE: the actual height will be used even if the height of the image content is defined based on the height change of the content, including the undefined height of the image content, when the content exceeds the height

Firefox: when no height is defined, if the image content is included in the content, the MF height resolution is based on the printing standard, which will cause a highly inconsistent situation with the actual content; when the height is defined, but the content exceeds the height, the content will exceed the defined height, but the style used in the area will not change, resulting in style dislocation.

Conclusion: If you can determine the content height, you 'd better define the height. If there is no way to define the height, you 'd better not use the border style. Otherwise, the style will be messy!

21. Analysis of ALT and title of IMG objects
ALT: the prompt when the photo does not exist or the load error occurs;

Title: tip description of the photo.

If title is not defined in IE, ALT can also be used as the IMG tip. However, in MF, the two are completely used according to the standard definition.

Conclusion: when defining IMG objects, you can write both ALT and title objects to ensure that they can be used properly in various browsers.

22. Differences in other details

When you write CSS, especially when you use float: left (or right) to arrange one-click images, you will find that there is a normal problem in Firefox and IE. No matter whether you use margin: 0 or border: 0 as the constraint, it will not help.

In fact, there is another problem here, that is, the processing of spaces by IE. Firefox ignores the processing of spaces between blocks by IE. That is to say, the end of a div should be followed by a DIV, and there should be no carriage return or space in the middle. Otherwise there may be problems, such as 3px deviation, and this cause is hard to find.

Unfortunately, I encountered this problem again, connecting multiple IMG labels and defining float: left. I hope these images can be connected. However, the results are normal in Firefox, and each IMG displayed in IE is 3 px apart. Deleting spaces between tags does not work.

Later, the solution was to set Li outside IMG and define margin: 0 for Li, which solved the display deviation between IE and Firefox. The explanation of some models by IE may cause many errors. You can only find the cause if you try more.

23. When connecting the event processing function, you can use the inline HTML method or the event
Property method definition.

1. Use inline HTML, such:
<Input type = "radio" name = "radio" value = "1 ″
Onclick = "javascript: A (event)">

Note:
(1) JavaScript cannot be saved;
(2) The real parameter must use event, and the parameter can use anything (such as EVT and event );

2. bind an event handler using event property, for example:
Document. form2.radio [0]. onclick =;
24. In MF, attributes defined by myself must be obtained by getattribute ().
25. If there is no parentelement parement. Children in MF, use
Parentnode. childnodes
The underlying meaning of childnodes is different in IE and MF. MF uses the DOM specification and will insert a blank space in childnodes.
Text node.
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)

26. Const Problems
(1) existing problems:
You cannot use the const keyword in IE. For example, const constvar = 32;
In IE, This Is A syntax error.
(2) solution:
Use VaR instead of Const.
27. Body object
Mf's body exists before the body tag is fully read by the browser, while ie must be fully read in the body.
And then exist
28. url Encoding
Write the URL directly in JS. Do not write the URL directly. For example:
VaR url = 'xx. jsp? Objectname = XX & objectevent = XXX ';
FRM. Action = URL, so it is very likely that the URL will not be properly displayed, so that the parameter is not correctly transmitted to the server.
Generally, 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, the requirements are as follows &
Generally, MF cannot recognize &
29. nodename and tagname Problems
(1) existing problems:
In MF, all nodes have a nodename value, but textnode does not have a tagname value. In IE,
Nodename usage
There is a problem (the test is not performed, but my IE has been killed several times ).
(2) solution:
Use tagname, but check whether it is empty