1. Capture browser events
There is a global window under IE. event, which can be used directly after an event is triggered, but does not exist in Firefox. When a trigger event is called to call a function, if this function has no form parameter, by default, Firefox will upload the event (event), but it won't work if there is a parameter. The solution is to manually upload an event so that it is OK, the Code is as follows:
The following two functions are triggered when the mouse is clicked. The first function is used normally in IE, but there is a problem in Firefox. If it is changed to the second function, there will be no problem, note the differences between calling methods
View plaincopy to clipboardprint?
<HTML>
<Head>
<Title> test </title>
<Script language = "JavaScript">
Function testevent ()
{
Registry.alert(registry.event.tar get. ID );
Return;
}
</SCRIPT>
</Head>
</Body>
<A href = "#" onclick = "testevent ()" id = "alink"> testevent </a>
</Body>
</Html>
<HTML>
<Head>
<Title> test </title>
<Script language = "JavaScript">
Function testevent ()
{
Registry.alert(registry.event.tar get. ID );
Return;
}
</SCRIPT>
</Head>
</Body>
<A href = "#" onclick = "testevent ()" id = "alink"> testevent </a>
</Body>
</Html>
View plaincopy to clipboardprint?
<HTML>
<Head>
<Title> test1 </title>
<Script language = "JavaScript">
Function testevent (EVT)
{
Extends extends alert(evt.tar get. ID );
Return;
}
</SCRIPT>
</Head>
</Body>
<A href = "#" onclick = "testevent (event)" id = "alink"> testevent </a>
</Body>
</Html>
<HTML>
<Head>
<Title> test1 </title>
<Script language = "JavaScript">
Function testevent (EVT)
{
Extends extends alert(evt.tar get. ID );
Return;
}
</SCRIPT>
</Head>
</Body>
<A href = "#" onclick = "testevent (event)" id = "alink"> testevent </a>
</Body>
</Html>
In fact, the event object has many different features in IE and Firefox, such as clienx and pagex. However, due to the many problems solved in the popular JS framework prototype, therefore, for prototype-based development, these issues can be considered less, but the above-mentioned capture problem is not completely resolved in prototype, so it is listed separately, the JS mentioned below only lists the unsolvable items in prototype.
2. transparency settings
In order to achieve the effect of setting a translucent layer, it is also different in IE and Firefox. in IE, the filter attribute of style has an Alpha value, while in Firefox, there is no alpha value, therefore, you must specify the opacity of the style. For the code, see:
<Style>
Filter: alpha (opacity = 10);/* ie */
-Moz-opacity:. 1;/* earlier than Firefox 1.0 */
Opacity: 0.1;/* new Firefox version */
</Style>
View plaincopy to clipboardprint?
<Script language = "JavaScript">
// Set the transparency of a div whose ID is screen to 45%. in IE:
Document. getelementbyid ('screen'). style. Filter = 'Alpha (opacity = 45 )';
// In Firefox:
Document. getelementbyid ('screen'). style. Required opacity = '0. 45 ';
</SCRIPT>
<Script language = "JavaScript">
// Set the transparency of a div whose ID is screen to 45%. in IE:
Document. getelementbyid ('screen'). style. Filter = 'Alpha (opacity = 45 )';
// In Firefox:
Document. getelementbyid ('screen'). style. Required opacity = '0. 45 ';
</SCRIPT>
3. Interesting questions when locating Layers
When locating the layer, we set the position for style. Left and style. Top of the layer. But today we found an interesting problem. The Code is as follows:
View plaincopy to clipboardprint?
<Script language = "JavaScript">
// Locate a layer with the ID of Dialog
Document. getelementbyid ('Dialog '). Left = 100;
Document. getelementbyid ('Dialog '). Left = 100;
// The problem occurs. in IE, the upper left corner of the layer is located at (100px, 100px) by default.
// But in Firefox, it is impossible to live or die. Later I found that when you didn't specify a unit for IE
// Add the unit "PX" for you, while Firefox is "stupid"
// If he thinks that you have not specified a unit, he will not position it for you. Well, the standard format should be as follows:
Document. getelementbyid ('Dialog '). Left = 100px;
Document. getelementbyid ('Dialog '). Left = 100px;
// Firefox recognizes it.
</SCRIPT>
<Script language = "JavaScript">
// Locate a layer with the ID of Dialog
Document. getelementbyid ('Dialog '). Left = 100;
Document. getelementbyid ('Dialog '). Left = 100;
// The problem occurs. in IE, the upper left corner of the layer is located at (100px, 100px) by default.
// But in Firefox, it is impossible to live or die. Later I found that when you didn't specify a unit for IE
// Add the unit "PX" for you, while Firefox is "stupid"
// If he thinks that you have not specified a unit, he will not position it for you. Well, the standard format should be as follows:
Document. getelementbyid ('Dialog '). Left = 100px;
Document. getelementbyid ('Dialog '). Left = 100px;
// Firefox recognizes it.
</SCRIPT>
4. PNG transparent background
PNG images are an indispensable part of the website design. The biggest feature should be that PNG can be lossless compressed and transparent, which plays an important role in enhancing the color effect of website images.
But why are there no extensive use of GIF and jpg images in PNG images? This is due to Microsoft's IE browser (Firefox and opera have better support for PNG, currently, mainstream Internet Explorer 6 cannot be well supported ). However, Microsoft has also recently changed itself. The new IE7 can support PNG well. we can imagine that in the future, the importance of PNG images will be even more prominent in the online world.
However, when most people are still using IE6, how can we use PNG images perfectly in the world of IE6 (the most important thing about PNG images is the use of PNG transparent background images ). We should be glad we are happy! The alphaimageloader filter of ie5.5 + provides a path to PNG. If it is loaded in the PNG (Portable Network Graphics) format, the transparency of 0%-100% is also provided. However, ie5.0 does not support attributes. It is only totally desperate, but there are only a few desperate ones. We should be satisfied and satisfied.
Now we will use the hack and alphaimageloader filters to implement the PNG transparent background image in IE6.
First, familiarize yourself with the filter Syntax:
View plaincopy to clipboardprint?
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = benabled, sizingmethod = ssize, src = "/blog/Surl ")
Attribute:
Enabled: Optional. Boolean ). Set or retrieve whether the filter is activated. True | false
True: default value. Filter activation.
False: the filter is disabled.
Sizingmethod: Optional. String ). Sets or retrieves the display mode of the image of the object to which the filter applies within the boundary of the object container.
Crop: Cut the image to fit the object size.
Image: default value. Increase or decrease the size boundary of an object to fit the image size.
Scale: scale the image to adapt to the size boundary of the object.
SRC: required. String ). Specify the background image using an absolute or relative URL. If this parameter is ignored, the filter will not work.
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = benabled, sizingmethod = ssize, src = "/blog/Surl ")
Attribute:
Enabled: Optional. Boolean ). Set or retrieve whether the filter is activated. True | false
True: default value. Filter activation.
False: the filter is disabled.
Sizingmethod: Optional. String ). Sets or retrieves the display mode of the image of the object to which the filter applies within the boundary of the object container.
Crop: Cut the image to fit the object size.
Image: default value. Increase or decrease the size boundary of an object to fit the image size.
Scale: scale the image to adapt to the size boundary of the object.
SRC: required. String ). Specify the background image using an absolute or relative URL. If this parameter is ignored, the filter will not work.
Firefox, opera, and other browsers that fully support PNG transparent images also support sub-selectors (>), while IE does not recognize (including IE7 ), we can use this to define the PNG Image styles in Firefox, opera, and other browsers. As follows:
View plaincopy to clipboardprint?
<Script language = "javascript>
// Set a transparent background for an id_infoboxlayer, and the background image is down.png. The Code is as follows:
// Browser judgment
If (navigator. appname! = "Microsoft Internet Explorer ")
{
$ ('Infobox'). style. Background = "0 URL (/blog/down.png ') No-repeat ";
}
Else
{
$ ('Infobox'). style. Background = "0 none no-repeat ";
$ ('Infobox'). style. Filter = "progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src ="/blog/down.png '")";
}
</SCRIPT>
<Script language = "javascript>
// Set a transparent background for an id_infoboxlayer, and the background image is down.png. The Code is as follows:
// Browser judgment
If (navigator. appname! = "Microsoft Internet Explorer ")
{
$ ('Infobox'). style. Background = "0 URL (/blog/down.png ') No-repeat ";
}
Else
{
$ ('Infobox'). style. Background = "0 none no-repeat ";
$ ('Infobox'). style. Filter = "progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src ="/blog/down.png '")";
}
</SCRIPT>
Note the following:
After alphaimageloader is used, the hyperlinks and buttons in the region become invalid. solution:
Directly set relative positions for links or buttons to let them move above the filter area.
Here we have four experiences:
1. When defining a page element, if the page element does not need to be called by a script, it does not need to define its name and ID attributes;
2. If you need to define the name and ID attributes of the page element, avoid having the same name and ID for different elements;
3. If there is no special need, try to make the name and ID the same, this is mainly for general
4. When getting elements in a script, use document. getelementbyid ("name/ID") whenever possible.
The following are some differences between IE and Firefox:
1. Object Problems
1.1 form object
Existing problems:
The existing code obtains the form object through document. Forms ("formname"), which is acceptable in IE and not in MF.
Solution:
Use as subscript. Change to document. Forms ["formname"]
Remarks
In the subscript calculation, formname is ID and name
1.2 HTML Object
Existing problems:
In ie, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. It cannot be in MF.
Document. All ("itemname") or document. All ("Itemid ")
Solution:
Use the Object ID as the object variable name
Document. getelementbyid ("Itemid ")
Remarks
Document. All is a custom ie method, so try not to use it.
Another method is available in both IE and MF.
VaR F = Document. Forms ["formname"];
VaR o = f. Itemid;
1.3 Div object
Existing problems:
In ie, the DIV object can use ID directly as the object variable name. It cannot be in MF.
Divid. style. Display = "NONE"
Solution:
Document. getelementbyid ("divid"). style. Display = "NONE"
Remarks
The getelementbyid method is used to obtain the object, whether it is a div object or not. See 1.2
1.4 about Frame
Existing Problems
In ie, the frame can be obtained using window. testframe, but not in MF.
Solution
The main difference between MF and IE in frame usage is:
If the following attributes are written in the frame tag:
Then Ie can access the window object corresponding to this frame through ID or name.
However, MF can only access the window object corresponding to this frame through name.
For example, if the above frame label is written in the HTM in the top window, you can access
IE: window. Top. frameid or window. Top. framename to access this window object
Mf: only window. Top. framename can access this window object.
In addition, both mfand iecan use javasdesktop.doc ument. getelementbyid ("frameid") to access the frame tag.
In addition, you can switch the frame content through the parameter top.doc ument. getelementbyid ("testframe"). src = 'xx.htm '.
You can also switch the frame content through window. Top. framename. Location = 'xx.htm '.
Window 1.5
Existing Problems
In IE, you can use showmodaldialog and showmodelessdialog to open modal and non-modal windows, but MF does not.
Solution
Use window. Open (pageurl, name, parameters) to open a new window.
If you want to pass parameters, you can use frame or IFRAME.
2. Summary
2.1 when defining various object variable names in JS, use ID whenever possible to avoid using name.
In ie, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. It cannot be used in MF. Therefore, use ID whenever possible to avoid using only name instead of ID.
2.2 The problem that the variable name is the same as the ID of an HTML Object
Existing Problems
In MF, because the Object ID is not the name of the HTML object, you can use the same variable name as the HTML Object ID, which cannot be used in IE.
Solution
When declaring variables, add VaR to avoid ambiguity, so that it can run normally in IE.
In addition, it is best not to take the same variable name as the HTML Object ID to reduce errors.
1. Document. Form. Item Problems
(1) existing problems:
Many statements such as document. formname. Item ("itemname") exist in the existing code and cannot be run in MF.
(2) solution:
Use document. formname. elements ["elementname"]
(3) Others
See 2
2. Collection class Object Problems
(1) existing problems:
In the existing Code, many collection class objects are used (), which is acceptable to IE and cannot be used by MF.
(2) solution:
Use [] as the subscript operation. For example, change document. Forms ("formname") to document. Forms ["formname"].
For example, change document. getelementsbyname ("inputname") (1) to document. getelementsbyname ("inputname") [1]
3. Window. Event
(1) existing problems:
Window. event cannot be run on MF.
(2) solution:
Mf events can only be used in the event. This problem cannot be solved. This can be changed as follows:
Original code (can be run in IE ):
<Input type = "button" name = "somebutton" value = "Submit" onclick = "javascript: gotosubmit ()"/>
...
<Script language = "JavaScript">
Function gotosubmit (){
...
Alert (window. Event); // use window. Event
...
}
</SCRIPT>
New Code (run in IE and MF ):
<Input type = "button" name = "somebutton" value = "Submit" onclick = "javascript: gotosubmit (event)"/>
...
<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 of the new Code is not modified, it is the same as the old code (that is, the gotosubmit call does not provide a parameter), it can only be run in IE, but no error occurs. Therefore, the TPL part of this solution is still compatible with the old code.
4. Question about the ID of an HTML object as the object name
(1) Existing Problems
In ie, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. It cannot be in MF.
(2) Solution
Use getelementbyid ("idname") instead of idname as the object variable.
5. The problem of getting an object using the idname string
(1) Existing Problems
In IE, Eval (idname) can be used to obtain the HTML object with ID as idname, which cannot be used in MF.
(2) Solution
Use getelementbyid (idname) instead of eval (idname ).
6. The variable name is the same as the ID of an HTML object.
(1) Existing Problems
In MF, because the Object ID is not the name of the HTML object, you can use the same variable name as the HTML Object ID, which cannot be used in IE.
(2) Solution
When declaring variables, add VaR to avoid ambiguity, so that it can 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
(1) Existing Problems
In ie, the event object has the X and Y attributes, and MF does not.
(2) Solution
In MF, event. X is equivalent to event. pagex. But event. pagex IE does not.
Therefore, event. clientx is used instead of event. X. This variable is also available in IE.
Event. clientx is slightly different from event. pagex (when the page has a scroll bar), but most of the time it is equivalent.
If it is the same, it may be a little troublesome:
MX = event. X? Event. X: event. pagex;
Use MX instead of event. x
(3) Others
Event. layerx is available in both IE and MF. There is no difference in the specific significance of this function.
8. About Frame
(1) Existing Problems
In ie, the frame can be obtained using window. testframe, but not in MF.
(2) Solution
The main difference between MF and IE in frame usage is:
If the following attributes are written in the frame tag:
<Frame src = "xx.htm" id = "frameid" name = "framename"/>
Then Ie can access the window object corresponding to this frame through ID or name.
However, MF can only access the window object corresponding to this frame through name.
For example, if the above frame label is written in the HTM in the top window, you can access
IE: window. Top. frameid or window. Top. framename to access this window object
Mf: only window. Top. framename can access this window object.
In addition, both mfand iecan use javasdesktop.doc ument. getelementbyid ("frameid") to access the frame tag.
In addition, you can switch the frame content through the parameter top.doc ument. getelementbyid ("testframe"). src = 'xx.htm '.
You can also switch the frame content through window. Top. framename. Location = 'xx.htm '.
For details about frame and window, see the 'window and framework' article in BBS.
And the tests under the/test/JS/test_frame/directory
---- Adun 2004.12.09 Modification
9. In MF, attributes defined by myself must be obtained by getattribute ().
10. If there is no parentelement parement. Children in MF, use parentnode. childnodes.
Childnodes has different meanings in IE and MF. MF uses Dom specifications, and blank text nodes are inserted in childnodes.
You can avoid this problem by using node. getelementsbytagname.
When a node in HTML is missing, ie and MF have different interpretations of parentnode, for example
<Form>
<Table>
<Input/>
</Table>
</Form>
In MF, the value of input. parentnode is form, while that of input. parentnode in IE is empty.
The node in MF does not have the removenode method. You must use the following method: node. parentnode. removechild (node)
11. Const Problems
(1) existing problems:
You cannot use the const keyword in IE. For example, const constvar = 32; in IE, This Is A syntax error.
(2) solution:
Use VaR instead of Const.
12. Body object
The MF body exists before the body tag is fully read by the browser, While IE exists only after the body is fully read.
13. url Encoding
In JS, if the URL is written, write directly & do not write & amp; for example, VAR url = 'xx. jsp? Objectname = XX & amp; objectevent = XXX ';
FRM. Action = URL, so it is very likely that the URL will not be properly displayed, so that the parameter is not correctly transmitted to the server.
Generally, the server reports that the error parameter is not found.
Of course, if it is an exception in TPL, because TPL complies with the XML specification and requires & writes as & amp;
Generally, MF cannot identify & amp;
14. nodename and tagname Problems
(1) existing problems:
In MF, all nodes have a nodename value, but textnode does not have a tagname value. In IE, nodename usage seems to be
There is a problem (the test is not performed, but my IE has been killed several times ).
(2) solution:
Use tagname, but check whether it is empty.
15. Element attributes
The input. Type attribute in IE is read-only, but can be modified in MF.
16. For example, TD. setattribute ("colspan", "3"); used in MF, but not in IE
It must be TD. setattribute ("colspan", "3"); in this way, both IE and MF work well.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
