Summary of js script code compatible with IE and FF (commonly used)_javascript skills

/*In the following, IE is used instead of Internet Explorer, and MF/FF is used instead of Mozzila Firefox */

//window.event IE: There is a window.event object FF: There is no window.event object. Event objects can be passed as arguments to functions. Such as onmousemove=doMouseMove(event) Solution: var event = event || window.event; example:

Copy code The code is as follows: function test(event) { var event = event || window.event; //do Something }

//Current mouse coordinates IE: event.x and event.y. FF: event.pageX and event.pageY. Common: Both have event.clientX and event.clientY properties.

//The current coordinates of the mouse (plus the distance the scroll bar has rolled) IE: event.offsetX and event.offsetY. FF: event.layerX and event.layerY. Solution: Copy code The code is as follows: function test(event) { var event = event || window.event; //or var event = event ? event : window.event;//You can use either of these two, or you can use if else (This abbreviation) var x = event.offsetX || event.layerX; var y = event.offsetY || event.layerY; //do Something } /**Other compatible solutions are similar, so I won’t give examples one by one**/

//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 there is 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.

//event.toElement problem Problem: Under IE, the even object has the srcElement attribute, but no target attribute; Under Firefox, the even object has the target attribute, but no srcElement attribute Solution: var target = e.relatedTarget || e.toElement;

//The x and y coordinate positions of the label: style.posLeft and style.posTop IE: have. FF: No. Common: object.offsetLeft and object.offsetTop.

//Height and width of the form IE: document.body.offsetWidth and document.body.offsetHeight. Note: The page must have a body tag at this time. FF: window.innerWidth and window.innerHegiht, and document.documentElement.clientWidth and document.documentElement.clientHeight. Common: document.body.clientWidth and document.body.clientHeight.

//Add event IE: element.attachEvent("onclick", function);. FF: element.addEventListener("click", function, true). General: element.onclick=function. Although the onclick event can be used, the effects of onclick and the above two methods are different. onclick only executes one process, while attachEvent and addEventListener execute a process list, that is, multiple processes. For example: element.attachEvent("onclick", func1); element.attachEvent("onclick", func2) so that both func1 and func2 will be executed.

//Custom attributes of the tag IE: If an attribute value is defined for the tag div1, the value can be obtained by div1.value and div1["value"]. FF: Cannot be obtained using div1.value and div1["value"]. General: div1.getAttribute("value").

//document.form.item problem IE: Existing problem: There are many statements like document.formName.item("itemName") in the existing code, which cannot be run under MF FF/IE: document.formName.elements["elementName"]

//Problems with collection/array objects (1) Existing problems: Many collection objects in existing code Use () when retrieving, IE can accept it, but MF cannot. (2) Solution: Use [] instead as subscript operation. For example: document.forms("formName") is changed to document.forms["formName"]. Another example: document.getElementsByName("inputName")(1) changed to document.getElementsByName("inputName")[1]

//The problem of using the id of the HTML object as the object name (1) Existing issues In IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document. Not in MF. (2) Solution Use getElementById("idName") instead of idName as an object variable

//The problem of using the idName string to obtain the object (1) Existing problems In IE, you can use eval(idName) to get the HTML object with the id idName, but not in MF. (2) Solution Use getElementById(idName) instead of eval(idName).

//The problem that the variable name is the same as an HTML object id (1) Existing problems In MF, because the object id is not used as the name of the HTML object, it can be used with the HTML object The variable name with the same id cannot be used in IE. (2) Solution When declaring variables, always add var to avoid ambiguity, so that it can also run normally in IE. In addition, it is best not to take the same variable name as the HTML object id to reduce errors.

//Problems with document.getElementsByName() and document.all[name] Existing problem: In IE, neither getElementsByName() nor document.all[name] can be used to obtain div elements (I don’t know if there are other elements that cannot be taken). //document.all Firefox is compatible with document.all, but will generate a warning. You can use getElementById("*") or getElementByTagName("*") instead of . However, for attributes such as document.all.length, it is completely incompatible

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

//window.location.href problem Explanation: IE or Firefox2.0. Under x, you can use window.location or window.location.href; under Firefox 1.5.x, can only use window.location Solution: use window.location instead of window.location.href

//Problems with modal and non-modal windows Explanation: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; this is not possible under Firefox Solution: Use window directly. The 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";

//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. frameId and frameName can have the same name. FF: This frame object can only be accessed using window.frameName. In addition, window.document.getElementById("frameId") can be used in IE and Firefox to access this frame object. ( 2) Switch frame content: You can use window.document.getElementById("testFrame").src = "xxx.html" or window.frameName.location = "xxx.html" in both IE and Firefox 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 the opener, but the parent frame), you can use parent in frme to access the parent window. For example: window.parent.document.form1.filename.value="Aqing";

//body problem Firefox’s body exists before the body tag is fully read by the browser ;The body of IE must exist after the body tag is completely read by the browser

//Event delegation method IE: document.body.onload = inject; //Function inject() in This has been implemented before FF: document.body.onload = inject();

//The difference between firefox and IE’s parent element (parentElement) IE: obj.parentElement FF: obj.parentNode Solution: Because both FF and IE support DOM, using obj.parentNode is a good choice

//innerText works normally in IE, but innerText does not work in FireFox . When textContent

//is used to set the style of the HTML tag in FireFox, all positional and font size values must be followed by px. This IE is also supported

//Parent node, child node and delete node IE: parentElement, parement.children, element.romoveNode(true). FF: parentNode, parentNode.childNodes, node.parentNode.removeChild(node).

//Operation on the options set of select In addition to [], SelectName.options.item() is also available for enumeration elements. In addition, SelectName.options.length, SelectName.options. add/remove works on both browsers. Be careful to assign elements after add, otherwise it will fail. Dynamically delete all options in the select: document.getElementById("ddlResourceType").options.length=0; Dynamically delete all options in the select A certain item option: document.getElementById("ddlResourceType").options.remove(indx); Dynamicly add an item option in the select: document.getElementById("ddlResourceType").options.add (new Option(text,value)); IE FF dynamic deletion general method: document.getElementById("ddlResourceType").options[indx] = null;

//Capture event Problem: FF does not have setCapture(), releaseCapture() methods Solution: IE: Copy code The code is as follows: obj.setCapture(); obj.releaseCapture(); FF: Copy code The code is as follows: window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); window.releaseEvents( Event.MOUSEMOVE|Event.MOUSEUP); if (!window.captureEvents) { o.setCapture(); }else { window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP) ; } if (!window.captureEvents) { o.releaseCapture(); }else { window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); }

//Prohibit selection of web content Problem: FF needs to be prohibited with CSS, IE needs to be prohibited with JS Solution: IE: obj. onselectstart = function() {return false;} FF: -moz-user-select:none;

//Draw IE: VML. FF: SVG.

//CSS: Transparent IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60). FF:opacity:0.6.

//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;.

//CSS: Double line bump border IE: border:2px outset;. 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;.