Summary of javascript compatibility in IE and Firefox

1. It is found that the id attribute of the input label in IE is the same as the name attribute by default. Firefox must explicitly write the id attribute name; otherwise, the id attribute cannot be used.
For example, <input type = "text" name = "username" value = ">
The following code in IE can be executed, but not in Firefox:
<Script>
Alert (document. getElementById ("username"). value );
</Script>
The following code must be changed:
<Input type = "text" name = "username" id = "username" value = "">
Reprinted as follows:
1. document. formName. item ("itemName ")
Note: in IE, you can use document. formName. item ("itemName") or document. formName. elements ["elementName"];
In Firefox, only document. formName. elements ["elementName"] can be used.
Solution: Use document. formName. elements ["elementName"].
2. Collection class Object Problems
Note: in IE, you can use () or [] to obtain collection class objects. In Firefox, you can only use [] to obtain collection class objects.
Solution: use [] to retrieve collection class objects.
3. Custom Attributes
Note: in IE, you can use the method to obtain general attributes to obtain custom attributes, or use getAttribute () to obtain Custom Attributes. In Firefox, you can only use getAttribute () obtain custom attributes.
Solution: getAttribute () is used to obtain custom attributes.
4. eval ("idName") Problems
Note: in IE, you can use eval ("idName") or getElementById ("idName") to obtain the HTML object whose id is idName. In Firefox, you can only use getElementById ("idName ") to obtain the HTML object whose id is idName.
Solution: getElementById ("idName") is used to retrieve the HTML object whose id is idName.
5. The variable name is the same as the ID of an HTML object.
Note: In IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document; in Firefox, it cannot. in Firefox, you can use the same variable name as the HTML Object ID; in IE, you cannot.
Solution: Use document. getElementById ("idName") replaces document. idName. we recommend that you do not use variable names with the same HTML Object ID to reduce errors. When declaring variables, add var to avoid ambiguity.
6. const Problems
Note: In Firefox, you can use the const keyword or var keyword to define constants. in IE, you can only use the var keyword to define constants.
Solution: Use the var keyword to define constants.
7. input. type attribute Problems
Description: The input. type attribute in IE is read-only, but the input. type attribute in Firefox is read/write.
8. window. event Problems
Note: window. the event can only run in IE, but not in Firefox, because the Firefox event can only be used in the event. firefox must be added to the source for parameter transfer. Ie ignores this parameter and uses window. event to read this event.
Solution:
IE & Firefox:
Submitted (event) "/>...
<Script language = "javascript">
Function Submitted (evt ){
Evt = evt? Evt :( window. event? Window. event: null );
}
</Script>
Window. open ("B .html", "", "modal = yes, width = 500, height = 500, resizable = no, scrollbars = no ");
9. event. x and event. y
Note: In IE, the even object has the x and y attributes, but does not have the pageX and pageY attributes. In Firefox, the even object has the pageX and pageY attributes, but does not have the x and y attributes.
Solution: Use mX (mX = event. x? Event. x: event. pageX;) to replace event. x in IE or event. pageX in Firefox.
10. event. srcElement Problems
Note: In 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. pay attention to the compatibility of event.
11. 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.
12. Modal and non-modal window Problems
Note: in IE, you can use showModalDialog and showModelessDialog to open modal and non-modal windows; in Firefox, no.
Solution: Use window. open (pageURL, name, parameters) to open a new window.
If you want to pass the parameters in the Child window back to the parent window, you can use window in the Child window. opener to access the parent window. for example, var parWin = window. opener; parWin.doc ument. getElementById ("Aqing "). value = "Aqing ";
13. frame Problems
The following frame is used as an example:
<Frame 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.
Firefox: 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:
In IE and firefox, you can use the upload Doc ument. getElementById ("testFrame"). src = "xxx.html" or window. frameName. location = "xxx.html" to switch 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. Example: parent.doc ument. form1.filename. value = "Aqing ";
14. body Problems
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.
15. Event delegation Method
IE: document. body. onload = inject; // Function inject () has been implemented before this
Firefox: document. body. onload = inject ();
16. Differences between firefox and IE parent elements (parentElement)
IE: obj. parentElement
Firefox: obj. parentNode
Solution: because both firefox and IE support DOM, using obj. parentNode is a good choice.
17. cursor: hand VS cursor: pointer
Firefox does not support hand, But ie supports pointer
Solution: Use pointer
18. innerText works properly in IE, but innerText does not work in FireFox. textContent is required.
Solution:
If (navigator. appName. indexOf ("Explorer")>-1 ){
Document. getElementById ('element'). innerText = "my text ";
} Else {
Document. getElementById ('element'). textContent = "my text ";
}
19. When setting the style of the HTML Tag in FireFox, the values of all positional and font sizes must be followed by px. This ie is also supported.
20. ie, firefox, and other browsers have different operations on table labels. in ie, assigning values to innerHTML of table and tr is not allowed. When adding a tr using js, the appendChild method does not work.
Solution:
// Append an empty row to the table:
Var row = otable. insertRow (-1 );
Var cell = document. createElement ("td ");
Cell. innerHTML = "";
Cell. className = "XXXX ";
Row. appendChild (cell );
21. padding Problems
Padding 5px 4px 3px 1px FireFox cannot be abbreviated,
Must be changed to padding-top: 5px; padding-right: 4px; padding-bottom: 3px; padding-left: 1px;
22. When the indentation of ul and ol lists is eliminated
Style should be written as: list-style: none; margin: 0px; padding: 0px;
The margin attribute is valid for IE and the padding attribute is valid for FireFox.
23. Transparent CSS
IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).
FF: opacity: 0.6.
24. CSS rounded corners
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 ;.
25. 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;
26. operations on the select options set
Apart from [], the enumeration element selectName. options. item () is also acceptable, and 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 (this is my test ).
27. Differences between XMLHTTP
// Mf
If (window. XMLHttpRequest) // mf
{
Xmlhttp = new XMLHttpRequest ()
Xmlhttp.
Xmlhttp. open ("GET", url, true)
Xmlhttp. send (null)
}
// Ie
Else if (window. ActiveXObject) // code for IE
{
Xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP ")
If (xmlhttp)
{
Xmlhttp.
Xmlhttp. open ("GET", url, true)
Xmlhttp. send ()
}
}
}
28. Differences between innerHTML
Firefox does not support innerHTML. The solution is as follows:
Rng = document. createRange ();
El = document. getElementById (elementid );
Rng. setStartBefore (el );
HtmlFrag = rng. createContextualFragment (content );
While (el. hasChildNodes () // clear the original content and add new content
El. removeChild (el. lastChild );
El. appendChild (htmlFrag );
29. img src refresh
In IE, you can use can refresh the image, but not in FireFox. The main issue is caching. Add a random number after the address to solve the problem. The onclick event editing code is as follows: "this. src = this. src + '? '+ Math. random ()"