JS and Ie/firefox Compatibility summary

Use IE instead of Internet Explorer to replace Mozzila Firefox with MF

1. Document.form.item Issues
(1) Existing problems:
There are many Document.formName.item ("itemname") statements in existing code that cannot be run in MF
(2) Workaround:
use document.formname.elements["elementname"]
(3) Other
See 2

2. Collection Class object Issues
(1) Existing problems:
many collection class objects in existing code use (), IE can accept, MF cannot.
(2) Workaround:
instead, use [] as the subscript operation. such as: Document.forms ("FormName") changed to document.forms["FormName"].
Another example: Document.getelementsbyname ("InputName") (1) Changed to Document.getelementsbyname ("InputName") [1]
(3) Other

3. Window.event
(1) Existing problems:
cannot run on MF using window.event
(2) Workaround:
MF event can only be used on the spot where the event occurred, and this issue cannot be resolved temporarily. You can work with this:
Original code (can be run in IE):
<input type= "button" Name= "Somebutton" value= "Submit" onclick= "" />
             ...
<script language= "JavaScript" >
function Gotosubmit () {
                     ...
alert (window.event); Use window.event
                     ...
                 }
</script>

new code (can be run in IE and MF):
<input type= "button" Name= "Somebutton" value= "Submit" onclick= "" />
             ...
<script language= "JavaScript" >
function Gotosubmit (evt) {
evt = evt evt: (window.event window.event:null);
                     ...
alert (EVT); Use evt
                     ...
                 }
</script>
In addition, if the first line in the new code does not change, as with the old code (that is, the gotosubmit call does not give the parameter), it will still be available only in IE, but not in error. Therefore, the TPL part of this scheme is still compatible with the old code.

4. An issue with the ID of the HTML object as the object name
(1) Existing problems
In IE, the ID of an HTML object can be used directly as a subordinate object variable name for document. Not in MF.
(2) Workaround
use getElementById ("Idname") instead of Idname as an object variable.

5. Problem with Idname string to get Object
(1) Existing problems
In ie, an HTML object with an ID of idname can be obtained using eval (idname), which cannot be in MF.
(2) Workaround
use getElementById (idname) instead of eval (idname).

6. The variable name has the same problem as an HTML object ID
(1) Existing problems
in MF, because the object ID is not the name of an HTML object, you can use the same variable name as the HTML object ID, which is not available in IE.
(2) Workaround
when declaring variables, add var to avoid ambiguity, which can be run normally in IE.
In addition, it is best not to take the same variable name as the HTML object ID to reduce the error.
(3) Other
See question 4

7. Event.x and Event.y issues
(1) Existing problems
In ie, the event object has an X, y attribute, not in MF.
(2) Workaround
in MF, the equivalent of Event.x is Event.pagex. But not in Event.pagex ie.
Therefore, the use of Event.clientx instead of event.x. This variable is also available 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 be a little more troublesome:
MX = event.x? Event.x:event.pagex;
and use MX instead of Event.x .
(3) Other
Event.layerx in IE and MF, there is no difference in the specific meaning has not been tested.


8. About Frame
(1) Existing problems
In ie, you can use Window.testframe to get the FRAME,MF.
(2) Workaround
The main differences between MF and IE in the use of frame are:
If the following attributes are written in the frame tag:
<frame src= "xx.htm" id= "Frameid" name= "FrameName"/>
then IE can access this frame's window object by ID or name
MF can only access the window object of this frame through name.
For example, if the frame tag is written in the HTM inside the topmost window, you can access
ie:window.top.frameId or Window.top.frameName to access the Window object
MF: This is the only way to access the Window object Window.top.frameName

In addition, Window.top.document.getElementById ("Frameid") can be used in both MF and IE to access frame tags
and you can switch the contents of the frame by window.top.document.getElementById ("Testframe"). src = ' xx.htm '
You can also switch the contents of a frame by window.top.frameName.location = ' xx.htm '
a description of frame and window can be found in BBS's ' window and frame ' article
and the tests under the/test/js/test_frame/directory
----Adun 2004.12.09 revision

9. In MF, the attributes that you define must be getattribute () to obtain
10. No parentelement parement.children in MF
parentnode parentnode.childnodes
ChildNodes the meaning of subscript is different in IE and MF, MF uses the DOM specification, ChildNodes inserts a blank text node.
It is generally possible to avoid this problem by Node.getelementsbytagname ().
when nodes in HTML are missing, IE and MF have different interpretations of parentnode, such as
<form>
<table>
<input/>
</table>
</form>
the value of Input.parentnode in MF is form, while the value of Input.parentnode in IE is null node

There is no Removenode method for the node in MF, you must use the following method Node.parentNode.removeChild (node)

11.const Problem
(1) Existing problems:
The const keyword cannot be used in IE. such as const CONSTVAR = 32; This is a syntax error in IE.
(2) Workaround:
do not use const, instead of Var.

. Body Object
The body of MF exists before the body tag is fully read by the browser, and IE must be present only after the body is fully read into it.

URL encoding
in JS, if you write the URL directly & do not write & such as var url = ' xx.jsp?objectname=xx&objectevent=xxx ';
frm.action = URL Then there is a good chance that the URL will not be properly displayed so that the parameter is not properly uploaded to the server
General Server error parameters not found
of course if the exception is in the TPL, because the TPL conforms to the XML specification, requires & written as &
General MF does not recognize the & in JS


NodeName and TagName issues
(1) Existing problems:
in MF, all nodes have nodeName values, but textnode do not have tagName values. In IE, the use of nodeName is as good as
There is a problem (the situation is not tested, but my IE has died several times).
(2) Workaround:
use TagName, but you should detect whether it is empty.

15. Element Properties
ie the Input.type property is read-only, but MF can be modified


issues with Document.getelementsbyname () and Document.all[name]
(1) Existing problems:
in IE, Getelementsbyname (), Document.all[name] cannot be used to get a DIV element (if there are other elements that cannot be taken yet).


1,document.getelementbyid Alternative document.all (ie applies)
2, set [] substitution (ie applies)
3,target Alternative Srcelement;parentnode parentelement (parentnode ie applies)
4,node.parentnode.removechild (node) alternative to Removenode (this) (ie applies)
5, there is a blank text node
6, no outerHTML property
7, Event local variable e overrides event global variable events
8,e.button key value differs from Event.button, only 3 key values and no combination key values
9, no Ondrag event
10,dommousescroll Alternative Onmousewheel;-e.detail replacement Event.wheeldelta
11,addeventlistener Alternative Attachevent;removeeventlistener replacement detachevent
12,e.preventdefault () alternative to event.returnvalue=false;e.stoppropagation () replacement event.cancelbubble=true
13,style.top, Style.left and other strict inspection "px" units (plus "px" ie applicable)
14,style= "-moz-opacity:0.9" replaces style= "Filter:alpha (opacity=90)"; no other filter
15,style.cursor= "pointer" alternative style.cursor= "hand" (ie applicable)
16,title Replace Alt (IE applies)
17, the status bar default is not modifiable, you need to adjust the FF settings
18, built-in drawing function replaces VML with canvas or SVG
19, code error often do not report error (want to also FF's helpless move, if each IE unique expression mode in it all error, even if the newspaper can not be reported to it)
20, the cache cleanup is very bad
Note: the "IE applicable" for the generality of the proposed wording, not indicated in IE does not apply.

All of the following IE refers to IE6.0

Verify that it is IE browser (come to Google JS)

var agt=navigator.useragent.tolowercase ();
var is_ie= (Agt.indexof ("MSIE")!=-1 && document.all);

Official start

Event Delegate Method

Ie

Document.body.onload = inject; Function inject () has been implemented prior to this

Firefox

Document.body.onload = inject ();

Some say the standard is:

Document.body.onload=new Function (' inject () ');

Unable to get event.srcelement in Firefox

Passing objects by other means

if (Isie)
Thistable.attachevent ("onmousedown", Onclickchangetdbackcolor);
Thistable.onmousedown=onclickchangetdbackcolor;
Else//deal Firefox
{


for (Var i=0;i<thistable.rows.length;i++)
{
var rowobj = thistable.rows[i];
for (Var j=0;j<rowobj.cells.length;j++)
{
var cellobj = rowobj.cells[j];
Cellobj.setattribute ("onmousedown", "Onclickchangetdbackcolor (This)");
}
alert (rowobj.cells[0].tagname);
}
}

This is the http://blog.joycode.com/lostinet/archive/2005/02/27/44999.aspx.

It's a hassle to write event handlers under Firefox.
Because Firefox is not window.event. If you want to get an event object, you must declare the first parameter of the time-processing function to be event.

So in order to be compatible with IE and Firefox, the general event handling method is:
Btn.onclick=handle_btn_click;
function Handle_btn_click (EVT)
{
if (evt==null) evt=window.event;//ie
Handle the event.
}
For simple programs, this is not a hassle.

But for some complex programs, a write function is not directly linked to the event. If the event is to be passed into this parameter, then all methods must pass the event. This is a nightmare.

Here's a way to solve this troublesome thing, and the principle.

in JScript, the invocation of a function has a func.caller of this property.
For example
function A ()
{
B ();
}
function B ()
{
alert (B.caller);
}
If B is called by A, then B.caller is a.

In addition, the function has a arguments property. This property can traverse the parameters currently executed by the function:
function Myalert ()
{
var arr=[];
for (Var i=0;i
Arr[i]=myalert.arguments[i];
Alert (Arr.join ("-"));
}
Alert ("Hello", "World", and "a")
You can show hello-world-1-2-3.
(The number of arguments is related to the caller, and there is no relationship to the parameter definition of the function)

based on these two properties, we can get the event object for the first function:
Btn.onclick=handle_click;
function Handle_click ()
{
Showcontent ();
}
function Showcontent ()
{
var evt=searchevent ();
if (Evt&&evt.shiftkey)//If it is an event-based call, and shift is pressed
window.open (Global_helpurl);
Else
Location.href=global_helpurl;
}
function Searchevent ()
{
Func=searchevent.caller;
while (Func!=null)
{
var arg0=func.arguments[0];
if (arg0)
{
if (arg0.constructor==event)//If it is an Event object
return arg0;
}
Func=func.caller;
}
return null;
}
This example uses Searchevent to search for an event object. Where ' Event ' is the event.constructor of FireFox.
When the example is running,
Searchevent.caller is showcontent, but showcontent.arguments[0] is empty. So when Func=func.caller, Func becomes Handle_click.
Handle_click is called by FireFox, although no parameters are defined, but when called, the first parameter is the event, so Handle_click.arguments[0] is the event!

For the above knowledge, we can combine prototype.__definegetter__ to achieve the implementation of window.event in FireFox:

Here's a simple code: Interested can be supplemented by

if (Window.addeventlistener)
{
Fixprototypeforgecko ();
}
function Fixprototypeforgecko ()
{
htmlelement.prototype.__definegetter__ ("Runtimestyle", Element_prototype_get_runtimestyle);
WINDOW.CONSTRUCTOR.PROTOTYPE.__DEFINEGETTER__ ("event", window_prototype_get_event);
event.prototype.__definegetter__ ("srcelement", event_prototype_get_srcelement);
}
function Element_prototype_get_runtimestyle ()
{
Return style instead ...
return this.style;
}
function Window_prototype_get_event ()
{
return Searchevent ();
}
function Event_prototype_get_srcelement ()
{
return this.target;
}

function Searchevent ()
{
Ie
if (document.all)
return window.event;

Func=searchevent.caller;
while (Func!=null)
{
var arg0=func.arguments[0];
if (arg0)
{
if (arg0.constructor==event)
return arg0;
}
Func=func.caller;
}
return null;
}
</body>

The difference between Firefox and IE (parentelement) 's parent element

Because both Firefox and IE support DOM, using Obj.parentnode is a good choice.

Ie
Obj.parentelement
Firefox
Obj.parentnode

The difference between UniqueID and ClientID in ASP.

To use the document.getElementById method, use the control to do this

"Javascript:onselectsubcatalog (\" "+SUBCATALOG_DRP. ClientID+ "\", "+catalogidx+", "+catid.tostring () +") ";

The difference between calling a SELECT element

Move out of a selection

IE:sel.options.remove (Sel.selectedindex);
Firefox:

To increase the selection:

IE:subCatalog.add (New Option(text,value));

Firefox
var opnobj = document.createelement ("OPTION");
Opnobj.id = optionID;
Opnobj.value = value;
Opnobj.text = text;
Subcatalog.appendchild (Opnobj);

Cursor:hand VS Cursor:pointer

Firefox does not support hand, but IE supports pointer, so it is recommended to use pointer uniformly.