Summary of compatible JavaScript writing methods under IE and Firefox_javascript skills

1. It is found that the id attribute of the input tag under IE is the same as the name attribute by default, but Firefox must clearly write the name of the id attribute, otherwise the id attribute cannot be used.
For example:
The following code can be executed under IE but not under Firefox:


It must be changed to the following code:

The following is reproduced: 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. Problems with collection objects
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 collection class objects. 3. Custom attribute problem

Explanation: Under IE, you can use the method of obtaining regular attributes to obtain custom attributes, or you can Use getAttribute() to get custom attributes; under Firefox, you can only use getAttribute() to get custom attributes.
Solution: Get custom attributes through getAttribute(). 4.eval(" idName") problem

Explanation: Under IE, you can use eval("idName") or getElementById("idName") to obtain the HTML object with the id idName; under Firefox, you can only use getElementById("idName" ) to obtain the HTML object with the id of idName.
Solution: Use getElementById("idName") uniformly to obtain the HTML object with the id of idName.
5. The variable name is the same as the ID of an HTML object Problem
Explanation: Under IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document; but not under Firefox. 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)"/> …

window.open("b.html","","modal=yes,width =500,height=500,resizable=no,scrollbars=no");
9.event.x and event.y issues

Explanation: Under IE, the even object has x, y attributes, but there are 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 the event. ;Under Firefox, the even object has a target attribute, but no srcElement attribute.
Solution: Use obj (obj = event.srcElement? event.srcElement: event.target;) to replace event.srcElement under IE or under Firefox event.target. Please also pay attention to the compatibility issues of event
11.window.location.href issue
Note: Under IE or Firefox2.0.x, you can use window.location. Or window.location.href; under Firefox1.5.x, only window.location can be used. Solution: Use window.location instead of window.location.href.

12. Modal and Non-modal window problem
Explanation: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; but not under Firefox. Solution: Use window.open(pageURL,name directly , 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, 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 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 enumeration elements. In addition, selectName .options.length, selectName.options.add/remove can be used 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.
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. 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);
29. img src refresh problem
You can use to refresh the image under IE, but not under FireFox. It's mainly a caching problem, which can be solved by adding a random number after the address. Edit the onclick event code as follows: "this.src=this.src '?' Math.random()"