Differences between JavaScript on IE and Firefox and alternative implementation methods_javascript skills

We often encounter some compatibility issues when dealing with js under IE and Firefox. Here are some summaries. I hope everyone will take a closer look and study

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. Problem 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. For custom attributes, you can also use getAttribute() to obtain custom attributes; under Firefox, you can only use getAttribute() to obtain custom attributes.
Solution: Get custom attributes uniformly through getAttribute().

4.eval("idName") problem

Explanation: Under IE, you can use eval("idName") or getElementById("idName") to get the HTML whose id is idName Object; 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 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 subordinate object of the document; it cannot be used under Firefox. Under Firefox, you can use the same variable name as the HTML object ID; you cannot use 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. Define constants.
Solution: Use the var keyword uniformly to define constants.

7. input.type attribute problem

Explanation: input.type under IE The attribute is read-only; but the input.type attribute under Firefox is read-write.

8.window.event problem

Explanation: window.event can only be used under IE Run, but cannot run under Firefox. This is because Firefox's event can only be used at the scene where the event occurs.
Solution:
IE:

...

IE&Firefox:

...


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;) Replace event.x under IE or event.pageX under Firefox.

10.event.srcElement problem

Explanation: Under IE, the even object has the srcElement attribute. But there is no target attribute; under Firefox, the even object has the target attribute, but no srcElement attribute.
Solution: use obj (obj = event.srcElement ? event.srcElement : event.target;) instead of event under IE. srcElement or event.target under Firefox.

11.window.location.href problem

Explanation: Under IE or Firefox2.0.x, you can use window. location or window.location.href; under Firefox1.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; this is not possible under Firefox.
Solution: Use it directly The window.open(pageURL,name,parameters) method opens 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";

13.Frame problem

Take the following frame as an example:


(1) Access the frame object:
IE: Use window.frameId or window.frameName to access this frame object.
Firefox: You can only use window. frameName to access this frame object.
In addition, you can use window.document.getElementById("frameId") in both IE and Firefox 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, 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 tag is not fully read by the browser It exists before it is entered; while IE's body must exist after the body tag is completely read by the browser.

For example:
Firefox:



IE&Firefox:




15. Event delegation method

IE: document.body.onload = inject; //Function inject() has been implemented before
Firefox: document.body.onload = inject() ;
Some people say that the standard is:
document.body.onload=new Function('inject()');

16. The difference between the parent element of firefox and IE (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 uniformly

18 .innerText works normally in IE, but innerText does not work in FireFox.

Solution:
if(navigator.appName.indexOf("Explorer") > -1){

document.getElementById('element').innerText = "my text";

} else{

document.getElementById('element').textContent = "my text";

}

19. Statements like obj.style.height = imgObj.height in FireFox are invalid

Solution:
obj.style.height = imgObj.height 'px';

20. IE, Firefox and other browsers have different operations on table tags. In IE, table and table tags are not allowed to be used. For the innerHTML assignment of tr, when using js to add a tr, the appendChile 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 and must be changed to padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

22. When eliminating the indentation of ul, ol and other lists, the

style should be written as: list-style:none;margin:0px;padding:0px;
where the margin attribute is valid for IE , 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;