Summary of some Javascript IE and Firefox compatibility issues and common examples_javascript skills

1. document.formName.item("itemName") Problem
Explanation: Under IE, you can use document.formName.item("itemName") or document.formName.elements["elementName"] ;
Under Firefox, you can only use document.formName.elements["elementName"].
Solution: Use document.formName.elements["elementName"] uniformly.
2. Collection class Object problem
Explanation: Under IE, you can use () or [] to obtain collection objects; under Firefox, you can only use [] to obtain collection objects.
Solution: Use [] uniformly to obtain collections Class object.
3. Custom attribute issues
Explanation: Under IE, you can use the method of getting regular attributes to get custom attributes, or you can use getAttribute() to get custom attributes; Under Firefox, you can only use getAttribute() to obtain custom attributes.
Solution: Uniformly obtain custom attributes through getAttribute().
4.eval("idName") problem
Note: Under IE, you can use eval("idName") or getElementById("idName") to obtain the HTML object with the id of idName; under Firefox, you can only use getElementById("idName") to obtain the HTML object with the id of idName. .
Solution: Use getElementById("idName") to obtain the HTML object with the id of idName.
5. The problem that the variable name is the same as the ID of an HTML object
Explanation: Under IE, the ID of the HTML object can be used directly as the variable name of the document's subordinate object; under Firefox, it cannot. Under Firefox, the same variable name as the HTML object ID can be used; but not under IE.
Solution: Use document.getElementById("idName") instead of document.idName. It is best not to use variable names with the same HTML object ID to reduce errors; always add var when declaring variables to avoid ambiguity.
6.const problem
Explanation: Under Firefox, you can use the const keyword or the var keyword to define constants; under IE, you can only use the var keyword to define constants.
Solution: Use the var keyword uniformly to define constants.
7. Input.type attribute problem
Explanation: The input.type attribute under IE is read-only; but the input.type attribute under Firefox For reading and writing.
8.window.event problem
Explanation: window.event can only be run under IE, but not Firefox. This is because Firefox’s event can only be run under Used on-site where the event occurs. Firefox must add the event from the source for parameter passing. Ie ignores this parameter and uses window.event to read the event.
Solution:
IE&Firefox:
Submitted(event)"/> …

9.event.x and event.y issues

Note: Under IE, the even object has x, y attributes, but no pageX, pageY attributes; under Firefox, the even object has pageX, pageY attributes, but no x, y attributes.
Solution: Use mX (mX = event .x ? event.x : event.pageX;) to replace event.x under IE or event.pageX under Firefox.
10.event.srcElement problem
Explanation: Under IE , the event object has the srcElement attribute, but no target attribute; under Firefox, the even object has the target attribute, but does not have the srcElement attribute.
Solution: Use obj (obj = event.srcElement ? event.srcElement : event.target;) To replace event.srcElement under IE or event.target under Firefox. Please also pay attention to the compatibility issues of event 11.window.location.href issue

Note: IE or Firefox2. .0.x, you can use window.location or window.location.href; under Firefox 1.5.x, you can only use window.location.
Solution: Use window.location instead of window.location.href. 12. Modal and non-modal window issues

Explanation: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; under Firefox, this cannot be done.
Solved Method: Directly use window.open(pageURL, name, parameters) to open a new window
If you need 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. ：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
13.Frame problem
Take the following frame as an example:

(1) Access frame object:
IE: Use window.frameId or window.frameName to access this frame object. frameId and frameName can have the same name.
Firefox: You can only use window.frameName to access this frame object.
In addition, you can use window.document.getElementById("frameId") to access this frame object in both IE and Firefox.
( 2) Switch frame content:
You can use window.document.getElementById("testFrame").src = "xxx.html" or window.frameName.location = "xxx.html" to switch frame in both IE and Firefox content. If you need to pass the parameters in the frame back to the parent window (note that it is not the opener, but the parent frame), you can use parent in frme to access the parent window.For example: parent.document.form1.filename.value="Aqing";
14.body problem
Firefox’s body exists before the body tag is fully read by the browser; and The body of IE must exist after the body tag is completely read by the browser.
15. Event delegation method
IE: document.body.onload = inject; //Function inject( ) has been implemented before
Firefox: document.body.onload = inject();
16. The difference between the parent element (parentElement) of firefox and IE
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 uniformly
18. innerText can work normally 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 HTML tags in FireFox, all positionalities and font sizes The value of must be followed by px. This ie is also supported.
20. IE, Firefox and other browsers have different operations on table tags. In IE, innerHTML assignment of table and tr is not allowed. When using js to add a tr, use appendChild The method doesn't work either.
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 problem
padding 5px 4px 3px 1px FireFox cannot interpret the abbreviation,
must be changed to padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
22. Eliminate ul, ol, etc. When indenting a list, the style should be written as: list-style:none;margin:0px;padding:0px; where the margin attribute is valid for IE and the padding attribute is valid for FireFox

23. CSS transparency
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 bump border
IE: border:2px offset;. 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. Operation on the options collection of select
In addition to [], SelectName.options.item() is also available for enumerated elements. In addition, SelectName .options.length, SelectName.options.add/remove all work on both browsers. Pay attention to assigning elements after add, otherwise it will fail (this is what I tested).
27. The difference between XMLHTTP
//mf if (window.XMLHttpRequest) //mf
{
xmlhttp=new XMLHttpRequest()
xmlhttp. onreadystatechange=xmlhttpChange
xmlhttp.open("GET",url,true)
xmlhttp.send(null)
}
//ie
else if (window.ActiveXObject) // code for IE
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
if (xmlhttp)
{
xmlhttp.onreadystatechange=xmlhttpChange
xmlhttp.open("GET", url,true)
xmlhttp.send()
}
}
}

28. The difference between innerHTML
Firefox does not support innerHTML. The solution can be 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);