This article summarizes and analyzes common compatibility issues in Javascript in IE and Firefox browsers. Share it for your reference, as follows:
Form
document.formName.item("itemName")IE: You can use document.formName.item("itemName") or document.formName.elements["elementName"]
Firefox: Only document.formName.elements["elementName"]
Solution: Use document.formName.elements["elementName"]
Collection class objects
IE: You can use () or [] to get collection class objects;
Firefox: Only use [] to get collection class objects.
Solution: Use [] to obtain collection class objects in a unified manner.
Custom properties
IE: You can use the method of getting regular attributes to get custom attributes, or you can use getAttribute() to get custom attributes
Firefox: You can only use getAttribute() to get custom properties.
Solution: uniformly obtain custom attributes through getAttribute().
Element acquisition
eval("idName")IE: You can use eval("idName") or getElementById("idName") to get HTML object with idName;
Firefox: You can only use getElementById("idName") to get HTML objects with idName with idName.
Solution: Use getElementById("idName") to obtain the HTML object with id as idName.
Duplicate naming
Problem with the same variable name as a certain HTML object ID
IE: The ID of the HTML object can be used directly as the variable name of the document's subordinate object, but it cannot be used under Firefox;
Firefox: You can use the same variable name as the HTML object ID, but you cannot in IE.
Workaround: Use document.getElementById("idName") instead of document.idName. It is best not to take variable names with the same HTML object ID to reduce errors; when declaring variables, add var to avoid ambiguity.
const
IE: Only use the var keyword to define variables.
Firefox: You can use the const keyword or the var keyword to define variables.
Solution: Use the var keyword to define variables uniformly.
input.type
input.type attribute problem
IE: The input.type attribute is read-only.
Firefox: The input.type attribute is read and write.
window.event
window.event can only run under IE, not in Firefox, because Firefox event can only be used on the scene where the event occurs.
Firefox: Event must be added from the source for parameter passing. IE ignores this parameter and uses window.event to read the event.
Solution:
<script language="javascript"> function fun(e) { e = e ? e : (window.event ? window.event : null); } </script>event.x and event.y
Description: Under IE, the even object has x and y attributes, but does not have pageX and pageY attributes; under Firefox, the even object has pageX and pageY attributes, but does not have x and y attributes.
Solution: Use mX(mX = event.x ? event.x : event.pageX;) instead of event.x under IE or event.pageX under Firefox.
event.srcElement
IE: The event object has a srcElement property, but does not have a target property;
Firefox: Even object has a target property, but no srcElement property.
Solution: Use obj(obj = event.srcElement ?event.srcElement :event.target;) instead of event.srcElement under IE or event.target under Firefox. Please also pay attention to the compatibility issues of event.
window.location.href
IE or Firefox2.0.x: You can use window.location or window.location.href;
Firefox1.5.x: Only window.location is used
Workaround: Use window.location instead of window.location.href.
Modal and non-modal windows
IE: Modal and non-modal windows can be opened through showModalDialog and showModelessDialog
Firefox: No!
Solution: Use window.open(pageURL, name, parameters) to open a new window.
If you need to pass 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";
frame
The following frame is an example:
<frame src="xxx.html" id="frameId" name="frameName" />
1. Access the frame object:
[The returned object in ie is object, and the specific type will be displayed in ff, such as: object window]
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 both IE and Firefox, you can use window.document.getElementById("frameId") to access this frame object.
2. Switch frame content:
In both IE and Firefox, you can use window.document.getElementById("testFrame").src = "xxx.html" or window.frameName.location = "xxx.html" to switch the content of the frame.
If you need to pass the parameters in the frame back to the parent window (note that it is not an opener, but a parent frame), you can use parent in the frame to access the parent window. For example: parent.document.form1.filename.value="a";
Body
IE: The body must exist after the body tag is fully read in by the browser.
Firefox: Body exists before the body tag is fully read by the browser.
Event delegation method
IE: The code copy is as follows: document.body.onload = inject; //function inject() has been implemented before this
Firefox: The code copy is as follows: document.body.onload = inject();
Parent element
The difference between Firefox and IE parent element (parentElement)
IE: obj.parentElement
Firefox: obj.parentNode
Solution: Because both firefox and IE support DOM, using obj.parentNode is a good choice.
Mouse pointer cursor
cursor:hand VS cursor:pointer
Firefox: Hand not supported
IE: Support pointer
Solution: Use pointer uniformly
Content text
innerText works normally in IE. However, 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').textC; }Operation on table
IE, Firefox and other browsers have different operations on table tags. In IE, it is not allowed to assign innerHTML values to table and tr. When using js to add a tr, the appendChild method is not useful.
Solution:
//Add a blank line to the table: var row = otable.insertRow(-1); var cell = document.createElement("td"); cell.innerHTML = " "; cell.className = "a"; row.appendChild(cell);options collection
Operation of options collection on select
In addition to [], SelectName.options.item() is also possible. In addition, SelectName.options.length, SelectName.options.add/remove can be used in both browsers.
*Note that the element is assigned after add, otherwise it will fail.
XMLHTTP
if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { // code for IE xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp){ xmlhttp.onreadystatechange = xmlhttpChange; xmlhttp.open("GET",url,true); xmlhttp.send(); }For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript Errors and Debugging Skills", "Summary of JavaScript Mathematical Operation Usage", "Summary of JSON Operation Skills in JavaScript", "Summary of JavaScript Switching Special Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Special Effects and Skills", "Summary of JavaScript Data Structures and Algorithm Skills" and "Summary of JavaScript Traversal Algorithm and Skills"
I hope this article will be helpful to everyone's JavaScript programming.