Browser JS compatibility issues Small summary------Peng Kee (024)

1. Getting problems with HTML objects

FireFox:document.getElementById ("Idname");
Ie:document.idname or document.getElementById ("Idname").
Solution: Uniform use of document.getElementById ("Idname");

2. Const ISSUES

Note: Under Firefox, constants can be defined using the Const keyword or the var keyword;
Under IE, you can only use the var keyword to define constants.
Workaround: use the var keyword uniformly to define constants.

3. Event.x and Event.y issues

Description: Under IE, the event object has an X, y attribute but no pagex,pagey attribute;
Under Firefox, the event object has the Pagex,pagey property, but there is no X, Y property.
Workaround: use mx (mx = event.x? Event.x:event.pagex) to replace IE under the Event.x or Firefox under the Event.pagex.

4. WINDOW.LOCATION.HREF Issues

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.

5. Frame Issues

Take the following frame as an example:
<frame src= "xxx.html" id= "Frameid" name= "FrameName"/>
(1) Access Frame object:
IE: Use Window.frameid or window.framename to access the frame object. Frameid and FrameName can have the same name.
Firefox: Only use Window.framename to access this frame object.
In addition, Window.document.getElementById ("Frameid") can be used in both IE and Firefox to access the frame object.
(2) Toggle Frame content:
You can use Window.document.getElementById ("Testframe") in both IE and Firefox. src = "xxx.html" or window.frameName.location = "xxx.htm L "to toggle the contents of the frame.
If you need to pass the arguments in the frame back to the parent window (note that it is not opener, but the parent frame), you can use parent in the frame to access the parent window. For example: parent.document.form1.filename.value= "aqing";

6. Modal and non-modal window problems

Description: Under IE, the modal and non-modal windows can be opened by ShowModalDialog and showModelessDialog; Firefox is not.
Workaround: open a new window directly using window.open (pageurl,name,parameters).
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";

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

8. Document.formName.item ("ItemName") issues

Problem description: Under IE, you can use Document.formName.item ("ItemName") or document.formname.elements["ElementName"];firefox, Use only document.formname.elements["ElementName"].
Workaround: use document.formname.elements["elementname" uniformly.

9. Collection Class object issues

Problem description: Under IE, you can use () or [] get the Collection class object; Firefox can only use [] to get the collection class object.
Workaround: use [] uniformly to get the collection class object.

10. Custom Attribute Issues

Problem description: Under IE, you can get custom properties by using the method of getting the general properties, or you can use GetAttribute () to obtain the custom attributes, and under Firefox, you can only use getattribute () to derive the custom attributes.
Workaround: Unify through getattribute () to get the custom attributes.

Input.type Property Issues

Problem Description: The Input.type property under IE is read-only, but the Input.type property in Firefox is read-write.
Workaround: do not modify the Input.type property. If you have to modify it, you can hide the original input and then insert a new INPUT element in the same location.

Event.srcelement problems

Problem description: Under IE, even object has Srcelement property, but no target property; Under Firefox, even object has the target property, but there is no srcelement attribute.
Workaround: use srcobj =event.srcelement? event.srcElement:event.target;
If you consider question 8th, use MyEvent instead of event.

Body Loading problem

Problem Description: The body object of Firefox exists before the body tag is fully read by the browser, while the body object of IE must exist after the body tag is fully read into the browser.
[note] This issue has not been verified and will be modified after verification.
[note] proven, IE6, Opera9, and FireFox2 do not have the above problem, the simple JS script can access all the objects and elements that have been loaded before the script, even if this element has not been loaded complete.

14. Event Delegation Method

Problem description: Under IE, use document.body.onload= inject; where Functioninject () has been implemented before, in Firefox, using document.body.onload= inject ();
Workaround: unify the use of document.body.onload=newfunction (' inject () '); or document.body.onload = function () {/* Here is the code */}
Note The difference between function and function.

Table Operation Issues

Problem description: IE, Firefox and other browsers for the table label operation is different, in IE does not allow the table and TR innerHTML assignment, using JS to add a TR, using the AppendChild method is not used.
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); [note] Since I rarely use JS direct operation of the table, this problem has not been met. It is recommended to use the JS frameset to manipulate table, such as jquery.

16. Object width and Height assignment problem

Description: The statement in Firefox similar to Obj.style.height =imgobj.height is invalid.

Browser JS compatibility issues Small summary------Peng Kee (024)