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:

<script> <BR>function test(event) { <BR>var event = event || window.event; <BR>//do Something <BR>} <BR></script>

//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:

<script> <BR>function test(event) { <BR>var event = event || window.event; <BR>//or var event = event ? event : window.event;//You can use either of these two, or you can use if else (This abbreviation) <BR>var x = event.offsetX || event.layerX; <BR>var y = event.offsetY || event.layerY; <BR>//do Something <BR>} <BR>< /script> <BR><div onmousedown="test(event)"></script>

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