Sorting out some JavaScript compatibility notes for IE and Firefox_javascript skills

1. document.form.item problem
(1) Existing problem:
There are many statements like document.formName.item("itemName") in the existing code, which cannot be used in Firefox Run
(2) solution under (Firefox):
Use document.formName.elements["elementName"] instead
(3) For other
see 2
2. Collection Class object problems
(1) Existing problems:
Many collection class objects in the existing code use () when accessing them. IE can accept it, but Firefox 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]
(3) Others
3. window.event
(1) Existing problems:
Using window.event cannot run on Firefox browser
(2) Solution:
Firefox’s event can only be used at the scene where the event occurs. This The problem cannot be solved yet. It can be modified like this:
Original code (can run in IE):

...

New code (can run in IE and Firefox):

...

In addition, if the first line in the new code does not change and is the same as the old code (that is, the gotoSubmit call does not give parameters), it will still only work in IE It runs but no errors occur. Therefore, the tpl part of this solution is still compatible with the old code.
4. The problem of using the id of the HTML object as the object name

(1) Existing problems
In IE, the ID of the HTML object can be used directly as the subordinate object variable name of the document. . Not in Firefox.
(2) Solution Use getElementById("idName") instead of idName as an object variable.
5. Problems with using idName string to obtain objects

(1) Existing problems
In IE, you can use eval(idName) to obtain the HTML object with idName. Not available in Firefox.
(2) Solution Use getElementById(idName) instead of eval(idName).
6. The problem that the variable name is the same as an HTML object id

(1) Existing problems
In Firefox, because the object id is not used as the name of the HTML object, it can be used The variable name that is the same as the HTML object id can 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.
(3) Others See question 4
7. Event.x and event.y issues

(1) Existing issues
In IE, the event object There are x, y attributes, which are not available in Firefox.
(2) Solution
In Firefox, the equivalent of event.x is event.pageX. But event.pageX is not available in IE.
So event.clientX is used instead of event.x. This variable also exists in IE.
Event.clientX and event.pageX have subtle differences (when the entire page has scroll bars), but most of the time they are equivalent.
If you want to be exactly the same, you can have a little more trouble:
mX = event.x ? event.x : event.pageX;
Then use mX instead of event.x
(3) Others event.layerX exists in IE and Firefox. Whether there is any difference in specific meaning has not yet been tested.
8. About frame

(1) Existing problems
You can use window.testFrame to get the frame in IE, but not in Firefox
(2)Solution
The main difference between Firefox and IE in the use of frames is: If the following attributes are written in the frame tag:


Then IE can access the corresponding frame through id or name window object
and Firefox can only access the window object corresponding to this frame through name
For example, if the above frame tag is written in the htm inside the top window, then you can access
ie like this: window.top .frameId or window.top.frameName to access this window object
Firefox: This is the only way to access this window object via window.top.frameName
In addition, window.top.document can be used in both Firefox and IE. getElementById("frameId") to access the frame tag
and you can use window.top.document.getElementById("testFrame").src = 'xx.htm' to switch the content of the frame
, you can also use window. top.frameName.location = 'xx.htm' to switch the content of the frame
For descriptions of frame and window, please refer to the 'window and frame' article of bbs
and the test under the /test/js/test_frame/ directory ----adun 2004.12.09 modified

9. In Firefox, the attributes you define must be obtained by getAttribute()10. In Firefox, there is no parentElement parement.children but use

parentNode parentNode.childNodes
The meaning of the subscript of childNodes is different in IE and Firefox. Firefox uses the DOM specification, and blank text nodes will be inserted into childNodes.
Generally, this problem can be avoided through node.getElementsByTagName().

When a node is missing in html, IE and Firefox interpret parentNode differently, for example

The value of input.parentNode in Firefox is form, while the value of input.parentNode in IE is an empty node
Node in Firefox does not have a removeNode method, you must use the following method node.parentNode.removeChild( node)
11.const issues
(1) Existing issues:
The const keyword cannot be used in IE. Such as const constVar = 32; This is a syntax error in IE.
(2) Solution:
Do not use const and use var instead.
12. body object
Firefox’s body exists before the body tag is fully read by the browser, while IE must exist after the body is fully read
13. url encoding
In js, if you write the url, just write it directly & don’t write it. For example, var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url then It is very likely that the URL will not be displayed normally and the parameters are not correctly transmitted to the server
Generally, the server will report an error that the parameter is not found
Of course, the exception is if it is in tpl, because tpl conforms to the xml specification, the requirement & is written as &
Generally Firefox cannot recognize & in js , but textNode has no tagName value. In IE, there seems to be a problem with the use of nodeName
(I haven’t tested the specific situation, but my IE has died several times). (2) Solution: Use tagName, but should detect whether it is empty.

15. Element attributes

The input.type attribute is read-only under IE, but it can be modified under Firefox

16. document.getElementsByName() and document.all[name ] Problems
(1) Existing problems: In IE, neither getElementsByName() nor document.all[name] can be used to obtain div elements (are there other elements that cannot be obtained? have no idea).