Work notes for migrating JavaScript from IE to FireFox

========================================================== ====================================
References
Http://nexgenmedia.net/evang/iemozguide/

Http://www.javascriptkit.com/domref/


Pass FirefoxBuilt-in tool learning methods:
Open TOOLS> dom inspector, select a control on the left, and select javascript object on the right.

Debug javascript with built-in tools
TOOLS-> JavaScript Console

Open all js Warnings:
Enter: about: config in the address bar
Double-click and set javascript option restict to true. Many warnings are displayed, which facilitates error correction.


☆About JS debugging tip
When debugging js, it is often affected by the cache, and the page does not load the latest code. The solution is as follows:
Open the original address in the new page, close the original page, OK.
The preceding methods are valid in IE and FF.

Press Ctrl + shift + del under ff to open the clear private information dialog box, click clear now, And reload the page once.

☆Ie->FirefoxJavascript
△Document. all-> document. getElementById
And the control should be identified by id instead of name.

To be compatible with the old Code, refer to the following function and replace document. all with document_all.
Function document_all (objName, doc ){
If (! Doc) doc = document;

Var obj;
Obj = doc. getElementById (objName );

If (! Obj) obj = doc. getElementsByName (objName) [0];

Return obj;
}

 
Tip:
If the control only has name and no id, when getElementById is used:
IE: You can also find the object
FF: NULL is returned.

△Method for obtaining an element in form
FormObj. elements ['user _ name'];

△When getting the set element, ie supports two writing methods: [] and (), but ff only supports [], for example:
Table. rows (5). cells (0)
Changed:
Table. rows [5]. cells [0]

△ The method for determining whether an object is an object should be
If (typeof object variable = "object ")
Instead of if (object variable = "[object]")

△Eval (Object Name)-> document. getElementById
FF supports eval Functions

△ Directly call the object through id
Object id. value = ""
Change
Document. getElementById ("name"). value = ""



△Onpropertychange event not supported

△Obj. insertAdjacentElement ("beforeBegin", objText );
Change to use
Obj. parentNode. insertBefore (objText, obj );

△Createelement does not support HTML code
Use document. write (esHTML); to solve some problems

△Innertext-> textContent

△ $ In the object name cannot be recognized. We recommend that you change it _
ObjName = "t1 $ spin"
Change
ObjName = "t1_spin"

△Event name and registration method changes
AddEventListener ("blur", myBlur, false );


In △ff, Attribute is set to an object and then retrieved. At this time, all attributes of the object are lost?
ObjText. setAttribute ("dropdown_select", obj );
Alert (obj. id) // correct name
Obj = objText. getAttribute ("dropdown_select ");
Alert (obj. id) // null

There is no problem in IE. For setAttribute of FF, the 2nd parameters are string type !!!
Therefore, if 2nd parameters are objects, the toString () method of the object is called.

The solution is to use the following call method:
ObjText. dropdown_select = obj;

Obj = objText. dropdown_select


△Classname-> class
Use class in FF to replace className in IE
Because class is a keyword, you need to use setAttribute/getAttribute.
SetAttribute ("class", "css style name ");

△ The attributes defined in html must use getAttribute.
<Td id = "TD1" isOBJ = "true">
When obtaining:
Document. getElementByID ("TD1"). isOBJ returns undefined, which is acceptable in IE.
Use:
Document. getElementByID ("TD1"). getAttribute ("isOBJ ")


In △ff, the select control is no longer: always displayed at the top
Therefore, you must set the zIndex of the control.

△ The values below if (vars = undefined) are used to judge whether they are equivalent.
Undefined
Null
False
0


△ If FF calls obj. focus (); an error is reported, change it:
Window. setTimeout (function () {obj. focus () ;}, 0 );

 

The current solution is to judge before losing focus.
△ The tip of the control that gets the focus in the control's blur event is similar to the item focus changing event of Powerbuilder.
Example: For the text control in the dropdown control,
If the next object to obtain the focus is selection, no input control is performed. If not, a prompt is displayed and the focus is set to text.

Tested:
IE: blur occurs after focus
FF: blur is called before focus.


IE: You can use activeElement in the onbeforedeactivate event to obtain the next object.

FF: The blur event occurs before the focus event, and FF has no intermediate event.
None of the following!
Target
CurrentTarget
RelativeTarget

It seems you need to handle this!
Register onblur of all controls and set lastElement
Process the previous one in focus? No!

Can I simulate my own itemfocuschanging event?
IE: onbeforedeactivate
FF: Register onfocus and onblur first, and set activeElement in it.
After activeElement is set in onfocus,
Call onbeforedeactivate
If onbeforedeactivate returns false, set focus to the original control!


Set lastObj = this before the control loses focus.
When the control obtains the focus, it first determines what lastObj is.





△Ff cannot handle the endless loop caused by alert

△Ff, keyCode is read-only. What should I do if I convert the carriage return to the tab? What should I do if I perform conversion during input ??

The work und is:
1. Press enter to jump-> write your own jump processing code.
2. In the control that can be entered,
Replace the selected part with the newly entered content: var text = String. fromCharCode (event. keyCode );
At the same time, it blocks the upload of key events and calls: event. preventDefault ()


△Selection is difficult because IE and FF are not close to each other.
Therefore, an object is specially designed to eliminate the difference.
FeelingFirefoxThe selection mechanism is more concise.

Is this mode a bridge mode?


△ <Button> will beFirefoxIt is interpreted as submitting a form or refreshing the page ???
Standard <button type = "button">

△ InFirefoxIs there any control in document. onfocus that actually gets the focus?
Why does document. keydown work?

△Children-> childNode ()


△Sytle. pixelHeight-> style. height

△Obj. attachEvent ("onfocus", editmask_focus );
Obj. onfocus = editmask_focus;
The above two sentences are actually different!
If you use attachEvent, you cannot use this keyword!
The general practice is to use event. srcElement instead of this.

△Fireevent cannot be used

△Onpropertychange-> oninput

△Determine whether a function or variable exists
IE: if (funcName) funcName ();
If (varName = undefined) varName = 1;

FF: if (window. funcName) funcName ();
If (window. varName = undefined) varName = 1;

That is, you must add window.

☆Ie->FirefoxCss class
△Cursor: hand-> cursor: pointer

△ExpressionFirefoxNot Supported
Expression also consumes a lot of CPU in IE, so it should not be used !!
To achieve better results, you should create your own expression to javascript processing function.
In this way, both IE and FF can be used.

△FILTERFirefoxNot Supported
Filter: Alpha (Opacity = 50 );
Replace
-Moz-opacity: 0.5;
 
△Text-overflow
Not Supported

△Transparent
FirefoxThe following obj. setAttribute ("bgColor", "# ffffff") only supports color.
You must use obj. style. backgroundColor = "transparent ".