A summary of compatible writing of JavaScript under IE and Firefox _javascript tips

1, the discovery of IE under the input label ID attribute the default and name properties are the same, and Firefox must explicitly write out the name of the id attribute, or you can not use the id attribute.
such as: <input type= "text" name= "username" "value=" ">
In IE under the following code can be executed and under Firefox but can not:
<script>
Alert (document.getElementById ("username"). value);
</script>
You must change to the following code to:
<input type= "text" name= "username" id= "username" "value=" ">
The following are reproduced:
1. Document.formName.item ("itemname") question
Note: Under IE, you can use Document.formName.item ("ItemName") or document.formname.elements["elementname"];
Firefox, you can only use the document.formname.elements["ElementName"].
Workaround: Unify the use of document.formname.elements["ElementName"].
2. Collection Class object problem
Note: IE, you can use () or [] get the Collection class object; Firefox, you can only use [] to get collection class objects.
WORKAROUND: Use [] to get collection class objects uniformly.
3. Custom attribute Issues
Note: Under IE, you can get the custom attribute by using the method of obtaining the General property, or you can use GetAttribute () to get the definition attribute. Firefox, you can only use getattribute () to get the definition attribute.
Workaround: The unification is obtained from the defined attribute through GetAttribute ().
4.eval ("idname") problem
Note: Under IE, you can use either eval ("Idname") or getElementById ("Idname") to obtain an HTML object with an ID of idname; Firefox can only use getElementById ("Idname") to get an HTML object with an ID of idname.
Workaround: Unify the getElementById ("Idname") to get the HTML object with the ID idname.
5. Variable name and an HTML object ID the same problem
Note: Under IE, the ID of HTML object can be used directly as the subordinate object variable name of document; Firefox is not. Firefox, you can use the same variable name as the HTML object ID, ie cannot.
Workaround: Use document.getElementById ("Idname") instead of document.idname. It is best not to take a variable name with the same HTML object ID to reduce the error; When declaring a variable, add var to avoid ambiguity.
6.const problem
Description: Firefox, you can use the Const keyword or the var keyword to define constants, ie, only use the var keyword to define constants.
Workaround: Use the var keyword uniformly to define constants.
7.input.type Property Problem
Note: IE under the Input.type property is read-only, but Firefox under the Input.type property is read and write.
8.window.event problem
Description: Window.event can only run in IE, but not under Firefox, this is because Firefox event can only be used in the scene of the incident occurred. Firefox must add an event as a parameter pass from the source. IE ignores this parameter and uses window.event to read the event.
Workaround:
Ie&firefox:
Submitted (event) "/> ...
<script language= "JavaScript" >
Function submitted (EVT) {
EVT=EVT?EVT: (Window.event?window.event:null);
}
</script>
window.open ("b.html", "" "," Modal=yes,width=500,height=500,resizable=no,scrollbars=no ");
9.event.x and EVENT.Y problems
Note: Under IE, the even object has x,y attribute, but there is no pagex,pagey attribute; Firefox, even objects have pagex,pagey properties, but no x,y properties.
Workaround: Use mx (mx = event.x Event.x:event.pagex) to replace the event.x under IE or the Event.pagex under Firefox.
10.event.srcelement problem
Note: Under IE, the event object has srcelement attribute, but there is no target attribute; Firefox, the even object has the target attribute, but there is no srcelement attribute.
Workaround: Use obj (obj = event.srcelement event.srcElement:event.target) to replace the event.srcelement under IE or the Event.target under Firefox. Please also note the event compatibility issue.
11.window.location.href Problem
Description: Under IE or firefox2.0.x, you can use window.location or window.location.href; firefox1.5.x, you can only use window.location.
WORKAROUND: Use window.location instead of window.location.href.
12. Modal and non modal window problems
Note: Under IE, modal and modeless windows can be opened by ShowModalDialog and showModelessDialog. Firefox is not.
WORKAROUND: Open the new window directly using the window.open (Pageurl,name,parameters) method.
If you need to pass parameters from a 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";
13.frame problem
Take the following frame as an example:
<frame src= "xxx.html" id= "Frameid" name= "FrameName"/>
(1) Access to the Frame object:
IE: Use Window.frameid or window.framename to access this frame object. Frameid and FrameName can have the same name.
Firefox: You can only use Window.framename to access this frame object.
In addition, Window.document.getElementById ("Frameid") can be used in IE and Firefox to access this frame object.
(2) Switch frame content:
Window.document.getElementById ("Testframe") can be used in both IE and Firefox. src = "xxx.html" or window.frameName.location = " Xxx.html "to toggle the contents of the frame.
If you need to pass parameters in a frame back 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: parent.document.form1.filename.value= "aqing";
14.body Problem
The body of Firefox exists before the body tag is fully read into the browser, and IE's body must be fully read by the browser before the body tag is present.
15. Event Delegate Method
IE:document.body.onload = inject; Function inject () was implemented prior to this
Firefox:document.body.onload = inject ();
the difference between Firefox and IE's parent element (parentelement)
IE:obj.parentElement
Firefox:obj.parentNode
Workaround: Because both Firefox and IE support DOM, using Obj.parentnode is a good choice.
17.cursor:hand VS Cursor:pointer
Firefox does not support hand, but IE supports pointer
Workaround: Unify the use of pointer
18.innerText can work in IE, but innertext is not in Firefox. Textcontent is required.
Workaround:
if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById (' element '). innertext = "my text";
} else{
document.getElementById (' element '). Textcontent = "my text";
}
When you set the HTML tag style in Firefox, all positional and font dimensions must be followed by PX. This IE is also supported.
Ie,firefox and other browsers for table label operations are different, in IE does not allow the table and TR innerHTML assignment, using JS to add a TR, using the AppendChild method also does not use.
Workaround:
Append a blank line to the table:
var row = Otable.insertrow (-1);
var cell = document.createelement ("TD");
cell.innerhtml = "";
Cell.classname = "XXXX";
Row.appendchild (cell);
padding question
padding 5px 4px 3px 1px Firefox can not be explained in shorthand,
Must be changed into padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
22. Elimination of UL, OL and other lists of indentation
Style should be written: list-style:none;margin:0px;padding:0px;
Where the margin property is effective for IE, the padding attribute is effective for Firefox
CSS Transparent
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
CSS Rounded Corners
IE: Round 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 beveled 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;
26. Options collection operations on select
Enumeration elements can be SelectName.options.item () in addition to [], and SelectName.options.length, Selectname.options.add/remove can be used on both browsers. Notice that the value element is assigned after add, otherwise it will fail (as I have tried).
the difference between XMLHTTP
Mf
if (window. XMLHttpRequest)//MF
{
Xmlhttp=new XMLHttpRequest ()
xmlHTTP.
Xmlhttp.open ("Get", url,true)
Xmlhttp.send (NULL)
}
Ie
else if (window. ActiveXObject)//code for IE
{
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP")
if (XMLHTTP)
{
xmlHTTP.
Xmlhttp.open ("Get", url,true)
Xmlhttp.send ()
}
}
}
the difference between innerHTML
Firefox does not support innerHTML, the solution can be as follows
RNG = Document.createrange ();
el = document.getElementById (ElementID);
Rng.setstartbefore (EL);
Htmlfrag = rng.createcontextualfragment (content);
while (El.haschildnodes ())//Clear original content, add new content
El.removechild (El.lastchild);
El.appendchild (Htmlfrag);
the src refresh Problem of img
In IE can be used can refresh the picture, but not under Firefox. The main problem is caching, which is solved by adding a random number to the back of the address. Edit the onclick event code as follows: "This.src=this.src+ '?" +math.random () "