1. document.formName.item("itemName") problem
Problem description: In IE, you can use document.formName.item("itemName") or document.formName.elements ["elementName"]; in Firefox, you can only use document.formName.elements["elementName"].
Solution: Use document.formName.elements["elementName"] in a unified manner.
2. Collection object problem
Problem description: In IE, you can use () or [] to get the collection class object; in Firefox, you can only use [] to get the collection class object.
Solution: Use [] to obtain collection class objects in a unified manner.
3. Custom attribute issues
Problem description: In IE, you can use the method of obtaining regular attributes to get custom attributes, or you can use getAttribute() to get custom attributes; in Firefox, you can only use getAttribute() to get custom attributes.
Workaround: uniformly obtain custom attributes through getAttribute().
4. Eval("idName") problem
Problem description: In IE, you can use eval("idName") or getElementById("idName") to get HTML object with idName; in Firefox, you can only use getElementById("idName") to get HTML object with idName.
Solution: Use getElementById("idName") to obtain the HTML object with id as idName.
5. The problem of the variable name and the ID of a certain HTML object
Problem description: Under IE, the ID of the HTML object can be used directly as the variable name of the document's subordinate object, but not in Firefox; under Firefox, the variable name that is the same as the HTML object ID can be used, but not 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 the var keyword to avoid ambiguity.
6. Const issue
Problem description: In Firefox, you can use the const keyword or the 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 uniformly.
7. The input.type attribute problem
Problem description: The input.type property under IE is read-only; but the input.type property under Firefox is read-write.
Solution: Do not modify the input.type property. If you have to modify it, you can first hide the original input and then insert a new input element in the same position.
8. window.event problem
Problem description: window.event can only run under IE, not in Firefox, because Firefox event can only be used on the scene where the event occurs.
Solution: Add event parameters to the function where the event occurs, and use var myEvent = evt?evt:(window.event?window.event:null)
Example:
<input type="button" onclick="doSomething(event)"/> <script language="javascript"> function doSomething(evt) { var myEvent = evt?evt:(window.event?window.event:null) ... }9. Event.x and event.y issues
Problem description: Under IE, the even object has x and y attributes, but no pageX and pageY attributes; under Firefox, the even object has pageX and pageY attributes, but no x and y attributes.
Solution: var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
If you consider the 8th issue, just use myEvent instead of event.
10. Event.srcElement problem
Problem description: Under IE, the even object has a srcElement property, but no target property; under Firefox, the even object has a target property, but no srcElement property.
Solution: Use srcObj = event.srcElement ? event.srcElement : event.target;
If you consider the 8th issue, just use myEvent instead of event.
11. window.location.href problem
Problem description: 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.
Workaround: Use window.location instead of window.location.href. Of course, you can also consider using the location.replace() method.
12. Modal and non-modal window problems
Problem description: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; under Firefox, it cannot.
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. If the parent window needs to control the child window, use var subWindow = window.open(pageURL, name, parameters); to obtain the newly opened window object.
Thirteen, frame and iframe issues
The following frame is an example:
(1) Access frame object
IE: Use window.frameId or window.frameName to access this frame object;
Firefox: Use window.frameName to access this frame object;
Solution: 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("frameId").src = "webjx.com.html" or window.frameName.location = "webjx.com.html" to switch the content of the frame;
If you need to pass parameters in the frame back to the parent window, you can use the parent keyword in the frame to access the parent window.
14. Body loading problem
Problem description: Firefox's body object exists before the body tag is fully read in by the browser; while IE's body object must exist after the body tag is fully read in by the browser.
[Note] This issue has not been actually verified yet, and will be modified after verification.
[Note] It has been proved that the above problems do not exist in IE6, Opera9 and FireFox2. A simple JS script can access all objects and elements that have been loaded before the script, even if this element has not been loaded yet.
15. Event delegation method
Problem description: In IE, use document.body.onload = inject; where function inject() has been implemented before this; in Firefox, use document.body.onload = inject();
Solution: Use document.body.onload=new Function('inject()'); or document.body.onload = function(){/* Here is the code*/}
[Note] The difference between Function and Function
16. The difference between the parent element accessed
Problem description: Under IE, use obj.parentElement or obj.parentNode to access obj's parent node; under firefox, use obj.parentNode to access obj's parent node.
Solution: Because both firefox and IE support DOM, obj.parentNode is used to access obj's parent node.
17. The problem of innerText.
Problem description: innerText works properly in IE, but innerText does not work in FireFox.
Workaround: Use textContent instead of innerText in non-IE browsers.
Example:
if(navigator.appName.indexOf("Explorer") >-1){ document.getElementById('element').innerText = "my text"; } else{ document.getElementById('element').textContent = ";my text"; }[Note] innerHTML is supported by browsers such as ie and firefox. Others, such as outerHTML, are only supported by ie, so it is best not to use it.
18. Table operation issues
Problem description: 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, using appendChild method does not work. document.appendChild supports FIREFOX when inserting rows into tables, but IE does not support them.
Solution: Insert rows into TBODY, do not insert them directly into tables
Solution:
//Add a blank line to the table: var row = otable.insertRow(-1); var cell = document.createElement("td"); cell.innerHTML = ""; cell.className = "XXXX"; row.appendChild(cell);[Note] It is recommended to use JS framework sets to operate tables, such as JQuery.
• Get the number of rows and columns of the table
In IE, you can use the following code to get the number of rows and columns:
var detailT= grid.gettable("11"); //Get the length of the row var r=detailT.rows.length; //Get the length of the column var l=detailT.cells.length;And getting the length of the column in Firefox or Google is invalid.
Solution:
var detailT= grid.gettable("11"); //Get the length of the row var r=detailT.rows.length; //Get the length of the column var l=detailT.rows[0].cells.length;19. Object width and height assignment problem
Problem description: The statement similar to obj.style.height = imgObj.height in FireFox is invalid.
Solution: Use obj.style.height = imgObj.height + 'px' in uniform;
20. setAttribute('style','color:red;')
FIREFOX supports (except IE, all browsers now support it), IE does not support it
Solution: Don't setAttribute('style','color:red')
Use object.style.cssText = 'color:red;' (there are exceptions to this writing)
The best way is to use all the above methods, and it will be foolproof.
21. Class name setting
setAttribute('class','styleClass')
FIREFOX supports, but IE does not support (specify the attribute name is class, IE will not set the element's class attribute. On the contrary, IE will automatically recognize the CLASSNAME attribute when setAttribute is used)
Solution:
setAttribute('class','styleClass') setAttribute('className','styleClass') or directly object.className='styleClass';Both IE and FF support object.className.
22. Set events with setAttribute
var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname();');
FIREFOX supports, but IE does not support
Solution:
In IE, dot notation must be used to refer to the required event handler, and anonymous functions must be assigned to it.
as follows:
var obj = document.getElementById('objId'); obj.onclick=function(){fucntionname();};This method is supported by all browsers
23. Create a radio button
Browsers other than IE
var rdo = document.createElement('input'); rdo.setAttribute('type','radio'); rdo.setAttribute('name','radiobtn'); rdo.setAttribute('value','checked');IE:
var rdo =document.createElement("<input name="radiobtn" type="radio" value="checked" />");Solution:
This difference is different from the previous one. This time it is completely different, so there is no common way to solve it, so only IF-ELSE
Fortunately, IE can recognize the uniqueID attribute of the document, which other browsers cannot recognize. Problem solved.
The quick solution to the 23 problems of multi-browser compatibility in JavaScript is the full content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.