Javascript JS compatible with browsers compatible with Firefox (FF) and IE Solutions

Javascript will inevitably be used for BS development, and each browser has different support for JavaScript. This requires our programmers to be compatible with them, otherwise Some browsers will not be able to run our code. The customer's complaint will be created. If the boss knows, this is not very good. Below are the JS script practices and decomposition compatible with IE and FF (partially selected from the Internet): </P> <p>. in the following example, Internet Explorer is replaced by IE and mozzila Firefox is replaced by MF/FF </P> <p> // window. event <br/> ie: window exists. event object <br/> FF: no window. event object. You can pass the event object to the function parameters. For example, onmousemove = domousemove (event) </P> <p> // current mouse coordinate <br/> ie: event. X and event. Y. <Br/> FF: event. pagex and event. Pagey. <Br/> General Purpose: both have the event. clientx and event. clienty attributes. </P> <p> // The current mouse coordinate (plus the scroll bar rolling distance) <br/> ie: event. offsetx and event. offsety. <Br/> FF: event. layerx and event. layery. </P> <p> // event. srcelement problem <br/> 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 does not have the srcelement attribute. <br/> solution: Use OBJ (OBJ = event. srcelement? Event. srcelement: event.targettoken used to replace event.tar get under event.srcelement?firefox. pay attention to the compatibility of event. </P> <p> // event. toelement <br/> problem: <br/> 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 there is no srcelement attribute <br/> solution: <br/> var target = E. relatedtarget | E. toelement; </P> <p> // Coordinate Position of X and Y of the tag: style. posleft and style. postop <br/> ie: Yes. <Br/> FF: No. <Br/> General Purpose: object. offsetleft and object. offsettop. </P> <p> // form height and width <br/> ie: Document. Body. offsetwidth and document. Body. offsetheight. Note: The page must have a body tag. <Br/> FF: always specify innerwidthand always specify innerhegihtto use document.documentelement.clientwidthand document.doc umentelement. clientheight. <Br/> General Purpose: Document. Body. clientwidth and document. Body. clientheight. </P> <p> // Add event <br/> ie: element. attachevent ("onclick", function );. <Br/> FF: element. addeventlistener ("click", function, true ). <Br/> usage: element. onclick = function. Although the onclick event can be used, the effect of onclick is different from that of the above two methods. onclick only executes one process, while attachevent and addeventlistener execute one process list, that is, multiple processes. For example, both func1 and func2 are executed in element. attachevent ("onclick", func1); element. attachevent ("onclick", func2. </P> <p> // tag Custom Attributes <br/> ie: If the div1 tag defines an attribute value, you can obtain the div1.value and div1 ["value. <Br/> FF: div1.value and div1 ["value"] cannot be used. <Br/> General Purpose: div1.getattribute ("value "). </P> <p> // document. form. item problem <br/> ie: Existing Problem: There are many documents in the existing code. formname. A statement such as item ("itemname") cannot be run in MF <br/> FF/ie: document. formname. elements ["elementname"] </P> <p> // set/array objects <br/> (1) existing problems: <br/> many collection class objects in the existing code are used (), which is acceptable to IE and cannot be used by MF. <Br/> (2) solution: <br/> use [] as the subscript. For example, change document. Forms ("formname") to document. Forms ["formname"]. <Br/> another example is document. change getelementsbyname ("inputname") (1) to document. getelementsbyname ("inputname") [1] </P> <p> // question about the ID of the HTML object as the object name <br/> (1) existing Problems <br/> 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. <Br/> (2) solution <br/> Use getelementbyid ("idname ") use idname as an object variable </P> <p> // use the idname string to obtain an object <br/> (1) Existing Problems <br/> in IE, eval (idname) can be used to obtain the HTML object with ID as idname, which cannot be used in MF. <Br/> (2) solution <br/> Use getelementbyid (idname) instead of eval (idname ). </P> <p> // The variable name is the same as the ID of an HTML object <br/> (1) Existing Problems <br/> 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 is not in IE. <Br/> (2) solution <br/> when declaring variables, all variables are added with VAR to avoid ambiguity, so that IE can run normally. <Br/> In addition, it is best not to take the same variable name as the HTML Object ID to reduce errors. </P> <p> // document. getelementsbyname () and document. all [name] Problems <br/> existing problems: in IE, getelementsbyname (), document. all [name] cannot be used to obtain DIV elements (whether there are other elements that cannot be retrieved is unknown ). <Br/> // document. All <br/> Firefox is compatible with document. All, but a warning is generated. You can use getelementbyid ("*") or getelementbytagname ("*") to replace <br/> but for document. all. is completely incompatible </P> <p> // input. type attribute <br/> Description: Input in IE. the Type attribute is read-only, but input in Firefox. type attribute is read/write </P> <p> // window. location. href problem <br/> Note: windows can be used in IE or firefox2.0.x. location or window. location. href; In firefox1.5.x, only windows can be used. location <br/> solution: Use window. location to replace window. location. href </P> <p> // modal and non-modal window problems <br/> note: in IE, you can use showmodaldialo G and showmodelessdialog open the modal and non-modal windows. Firefox cannot <br/> solution: Use window. Open (pageurl, name, parameters) to open a new window. <Br/> to pass the parameters in the subwindow back to the parent window, you can use window in the subwindow. opener to access the parent window. for example, VAR parwin = Window. opener; parwin.doc ument. getelementbyid ("aqing "). value = "aqing"; </P> <p> // frame <br/> The following frame is used as an example: <br/> <frame src = "xxx.html" mce_src = "xxx.html" id = "frameid" name = "framename"/> <br/> (1) access the frame object: <br/> ie: Use window. frameid or window. framename to access this frame object. frameid and framename can have the same name. <Br/> FF: only window is allowed. framename to access this frame object. <br/> In addition, both ieand firefoxcan use zookeeper Doc ument. getelementbyid ("frameid") to access this frame object. <br/> (2) switch the frame content: <br/> both ieand firefoxcan use JavaServer Doc ument. getelementbyid ("testframe "). src = "xxx.html" or window. framename. location = "xxx.html" to switch the frame content. <br/> 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, upload your parent.doc ument. form1.filename. value = "aqing"; </P> <p> // body <br/> the Firefox body exists before the body tag is completely read by the browser; the IE body must exist only after the body tag is fully read by the browser </P> <p> // event Delegate method <br/> ie: document. body. onload = inject; // function inject () has been implemented before this <br/> FF: document. body. onload = inject (); </P> <p> // difference between Firefox and IE parent element <br/> ie: obj. parentelement <br/> FF: obj. parentnode <br/> solution: because both ff and IE support DOM, obj. parentnode Yes. </P> <p> // innertext works properly in IE, but innertext does not work in Firefox. textcontent </P> <p> // when you set 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 </P> <p> // parent node, child node, and delete node <br/> ie: parentelement, parement. children, element. romovenode (true ). <Br/> FF: parentnode, parentnode. childnodes, node. parentnode. removechild (node ). </P> <p> // operation on the Select Options set <br/> In addition to [], selectname is an enumeration element. options. item () is also acceptable, and selectname. options. length, selectname. options. add/Remove can be used in both browsers. <Br/> note that the element is assigned after adding, otherwise it will fail <br/> dynamically delete all options in the SELECT statement: <br/> document. getelementbyid ("ddlresourcetype "). options. length = 0; <br/> dynamically delete an option in the SELECT statement: <br/> document. getelementbyid ("ddlresourcetype "). options. remove (indx); <br/> dynamically Add the option in select: <br/> document. getelementbyid ("ddlresourcetype "). options. add (New Option (text, value); <br/> General method for dynamically deleting ie FF: <br/> document. getelementbyid ("ddlresourcetype "). OP Tions [indx] = NULL; </P> <p> // capture events <br/> problem: <br/> FF no setcapture (), releasecapture () method <br/> solution: <br/> ie: <br/> obj. setcapture (); <br/> obj. releasecapture (); <br/> FF: <br/> window. captureevents (event. mousemove | event. mouseup); <br/> window. releaseevents (event. mousemove | event. mouseup); <br/> If (! Window. captureevents) {<br/> O. setcapture (); <br/>}else {<br/> window. captureevents (event. mousemove | event. mouseup); <br/>}< br/> If (! Window. captureevents) {<br/> O. releasecapture (); <br/>}else {<br/> window. releaseevents (event. mousemove | event. mouseup); <br/>}</P> <p> // disable the selection of webpage content <br/> problem: <br/> FF must be disabled by CSS, disable IE using JS <br/> solution: <br/> ie: obj. onselectstart = function () {return false ;}< br/> FF:-moz-user-select: none; </P> <p> // drawing <br/> ie: VML. <Br/> FF: SVG. </P> <p> // css: transparent <br/> ie: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ). <Br/> FF: opacity: 0.6. </P> <p> // css: rounded corner <br/> ie: rounded corner is not supported. <Br/> 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 ;. </P> <p> // css: double-line concave-convex border <br/> ie: Border: 2px outset ;. <Br/> 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 ;.