Javascript will inevitably be used for BS development, and each browser has different support for javascript. This requires our programmers to be compatible with their following JavaScript scripts that are compatible with IE and FF (some of them are selected from the Internet and sorted by myself). I hope this will help you. /* Replace Internet Explorer with IE, and replace Mozzila Firefox with MF/FF */
// Window. event
IE: window. event object
FF: There is no window. event object. You can pass the event object to the function parameters. For example, onmousemove = doMouseMove (event)
Solution: var event = event | window. event;
Example:
The Code is as follows:
Script
Function test (event ){
Var event = event | window. event;
// Do Something
}
Script
// Current mouse Coordinate
IE: event. x and event. y.
FF: event. pageX and event. pageY.
Generic: both have the event. clientX and event. clientY attributes.
// The current coordinates of the mouse (plus the scroll bar rolling distance)
IE: event. offsetX and event. offsetY.
FF: event. layerX and event. layerY.
Solution:
The Code is as follows:
Script
Function test (event ){
Var event = event | window. event;
// Or var event = event? Event: window. event; // both can be used. You can also use if else)
Var x = event. offsetX | event. layerX;
Var y = event. offsetY | event. layerY;
// Do Something
}
Script
/** Other compatible solutions are similar. No more examples are provided **/
// Event. srcElement
Note: In IE, the event object has the srcElement attribute but does not have the target attribute. In Firefox, the even object has the target attribute,
But there is no srcElement attribute.
Solution: Use obj (obj = event. srcElement? Event. srcElement: event.tar get ;)
To replace the event. srcElement or
Event.tar get under firefox. pay attention to the event compatibility.
// Event. toElement
Problem:
In IE, the even object has the srcElement attribute, but does not have the target attribute;
In Firefox, the even object has the target attribute, but does not have the srcElement attribute.
Solution:
Var target = e. relatedTarget | e. toElement;
// Coordinates of x and y of the tag: style. posLeft and style. posTop
IE: Yes.
FF: No.
Generic: object. offsetLeft and object. offsetTop.
// The height and width of the form
IE: document. body. offsetWidth and document. body. offsetHeight. Note: The page must have a body tag.
FF: window. innerWidth and window. innerHegiht,
And document.documentelement.clientwidthand document.doc umentElement. clientHeight.
Generic: document. body. clientWidth and document. body. clientHeight.
// Add an event
IE: element. attachEvent ("onclick", function );.
FF: element. addEventListener ("click", function, true ).
Usage: element. onclick = function. Although onclick events can all be used, the effects of onclick and the above two methods are different,
Onclick only executes one process, while attachEvent and addEventListener execute one process list, that is, multiple processes.
For example, element. attachEvent ("onclick", func1 );
Element. attachEvent ("onclick", func2) will be executed in both func1 and func2.
// Tag Custom Attributes
IE: If you define an attribute value for tag p1, you can obtain this value through p1.value and p1 ["value.
FF: p1.value and p1 ["value"] cannot be used.
Generic: p1.getAttribute ("value ").
// Document. form. item
IE: an existing problem: many statements such as document. formName. item ("itemName") exist in the existing code and cannot be run in MF.
FF/IE: document. formName. elements ["elementName"]
// Set/array objects
(1) existing problems:
In the existing Code, many collection class objects are used (), which is acceptable to IE and cannot be used by MF.
(2) solution:
Use [] as the subscript operation. For example, change document. forms ("formName") to document. forms ["formName"].
For example, change document. getElementsByName ("inputName") (1) to document. getElementsByName ("inputName") [1]
// Question about the id of the HTML object as the object name
(1) Existing Problems
In IE, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. It cannot be in MF.
(2) Solution
Use getElementById ("idName") instead of idName as the object variable
// Obtain the object using the idName string
(1) Existing Problems
In IE, eval (idName) can be used to obtain the HTML object with id as idName, which cannot be used in MF.
(2) Solution
Use getElementById (idName) instead of eval (idName ).
// The variable name is the same as the id of an HTML Object
(1) Existing Problems
In MF, because the Object id is not the name of the HTML object, you can use the same variable name as the HTML Object id, which cannot be used in IE.
(2) Solution
When declaring variables, add var to avoid ambiguity, so that it can run normally in IE.
In addition, it is best not to take the same variable name as the HTML Object id to reduce errors.
// Document. getElementsByName () and document. all [name] Problems
Existing Problem: in IE, neither getElementsByName () nor document. all [name] can be used to obtain the p element.
(Whether there are other elements that cannot be retrieved ).
// Document. all
Firefox is compatible with document. all, but generates a warning. You can use getElementById ("*")
Or getElementByTagName ("*") to replace
However, attributes such as document. all. length are completely incompatible.
// Question about the input. type attribute
Description: The input. type attribute in IE is read-only, but the input. type attribute in Firefox is read/write.
// Window. location. href
Note: in IE or Firefox2.0.x, you can use window. location or window. location. href; In Firefox1.5.x,
Only window. location can be used
Solution: Use window. location to replace window. location. href.
// Modal and non-modal window Problems
Note: in IE, you can use showModalDialog and showModelessDialog to open modal and non-modal windows. In Firefox, you cannot
Solution: Use window. open (pageURL, name, parameters) to open a new window.
If you want 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.doc ument. getElementById ("Aqing"). value = "Aqing ";
// Frame Problem
The following frame is used 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: only window. frameName can be used to access this frame object.
In addition, both ieand firefoxcan access this frame object by using the upload metadata Doc ument. getElementById ("frameId.
(2) Switch frame content:
Both ie' and firefox' can use javaslass Doc ument. getElementById ("testFrame"). src = "xxx.html"
Or window. frameName. location = "xxx.html" to switch the frame content.
If you need to return the parameters in the frame to the parent window (note that it is not opener but parent frame), you can use parent in frme to access the parent window.
For example, export your parent.doc ument. form1.filename. value = "Aqing ";
// Body
The body of Firefox exists before the body tag is fully read by the browser. The body of IE must exist only after the body tag is fully read by the browser.
// Event Delegate Method
IE: document. body. onload = inject; // Function inject () has been implemented before this
FF: document. body. onload = inject ();
// Difference between the parent element of firefox and IE
IE: obj. parentElement
FF: obj. parentNode
Solution: because both FF and IE support DOM, using obj. parentNode is a good choice.
// InnerText works properly in IE, but innerText does not work in FireFox. textContent is required.
// When setting the style of the HTML Tag in FireFox, all the 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 ).
// Perform operations on the select options set
Apart from [], SelectName. options. item () is also acceptable for enumeration elements. In addition, SelectName. options. length,
SelectName. options. add/remove can be used in both browsers.
Note that the element is assigned after the add operation. Otherwise, the Operation will fail.
Dynamically delete all options in the select statement:
Document. getElementById ("ddlResourceType"). options. length = 0;
Dynamically delete an option in the select statement:
Document. getElementById ("ddlResourceType"). options. remove (indx );
Dynamically Add the option in the select statement:
Document. getElementById ("ddlResourceType"). options. add (new Option (text, value ));
General methods for ie ff dynamic deletion:
Document. getElementById ("ddlResourceType"). options [indx] = null;
// Capture events
Problem:
FF has no setCapture () or releaseCapture () Methods
Solution:
IE:
The Code is as follows:
Obj. setCapture ();
Obj. releaseCapture ();
FF:
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 the selection of webpage content
Problem:
FF is forbidden by CSS, whereas IE is forbidden by 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 corner
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 concave and convex 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 ;.
