Notes for JS Code compatibility with IE, Firefox, and chrome

Source: Internet
Author: User
JS of IE, Firefox, and chromeCodeCompatibility considerations

Jangogo @ 2009-6-26 12:03:00

 

Recently, the company's 4 FangSifangSifangBecause online software products are widely praised by more users, the company decided to only support IE and expand to support Firefox and chrome. The Walkman version decided to use chrome as the client, when upgrading code compatibility, I encountered some problems. Let's record them for reference by colleagues and friends.

1. If XMLHTTP of IE requests a non-XML file, xmlhttpobject. responsexml is an available object.
Firefox and chrome return null.
IE, we can use xmlhttpobject. responsexml. loadxml, Firefox and chrome through other methods.

  1. VaRXx = getxmlhttpobj ();
  2. VaRTEXT = XX. responsetext. replaceall ('&','&');
  3. VaRXD = XX. responsexml;
  4. If(Xd ){
  5. XD. loadxml (text );
  6. }Else{
  7. VaROparser =NewDomparser ();
  8. XD = oparser. parsefromstring (text,"Text/XML");
  9. // Alert (XD. getelementsbytagname (""));
  10. }

2. xmlhttpobject. IE and chrome support the xmlhttpobject. Send () method without any parameters. Firefox must require at least one parameter, even if the parameter value is null, that is:

    1. // To be compatible with multiple browsers, you must write this statement. The parameter null cannot be omitted:
    2. Xmlhttpobject. Send (Null);

3. In Firefox, The htmlelementobject. outerhtml attribute is invalid, and IE and chrome are normal. For example, we want to delete a div:

    1. // This statement works well in IE and chrome.
    2. $ ("Div"). Outerhtml ="";// Delete a div
    3. // Firefox cannot be implemented through the preceding statement. It can only be implemented through the following methods:
    4. $ ("Div"). Parentnode. removechild ($ ("Div"));
    5. Delete$ ("Div"+ N );

4. firfox does not support obtaining this element directly with the ID of htmlelementobject. IE and chrome support this element well.
Is firfox rigid in adhering to the "standard "?!
For example, there is an HTML code on our page:

    1. <Div ID="Divobj">This is some text</Div>

IE and chrome can directly use divobj to reference this element object.
Firfox can only use the getelementbyid ('divobj ') or the famous $ ('divobj') function.

5. Use JavaScript to operate stylesheet objects and rules objects. The compatible syntax is as follows:

    1. var rules = document. getelementbyid ( "xwincss" ). sheet | document. stylesheets [ "xwincss" ];
    2. If (rules. Rules) {
    3. // ie
    4. rules = rules. Rules;
    5. } else {
    6. // firefox
    7. rulesw.rules.css rules;
    8. }

6. Firefox and IE event handling
In IE, event objects are saved and maintained as global variables. All browser events, whether triggered by users
Or other events will update the window. event object. Therefore, in the code, you only need to easily call window. Event
You can easily get the event object, and then event. srcelement can get the element that triggers the event for further processing.
In ff, the event object is not a global object. Generally, it occurs on site and is used on site. FF automatically transmits the event object
To the corresponding event processing function. In the code, the first parameter of the function is the event object under ff.

  1. // <Button id = "btn4" onclick = "foo4 ()"> button 4 </button>
  2. FunctionFoo4 (){
  3. VaREVT = getevent ();
  4. VaRElement = EVT. srcelement | evt.tar get;
  5. Alert (element. ID)
  6. }
  7. FunctionGetevent ()
  8. {// Compatible with both IE and FF
  9. If(Document. All)ReturnWindow. event;
  10. Func = getevent. Caller;
  11. While(Func! =Null){
  12. VaRArg0 = func. Arguments [0];
  13. If(Arg0 ){
  14. If(Arg0.constructor = event | arg0.constructor = mouseevent) | (Typeof(Arg0) ="Object"& Arg0.preventdefault & arg0.stoppropagation )){
  15. ReturnArg0;
  16. }
  17. }
  18. Func = func. Caller;
  19. }
  20. Return Null;
  21. }

7. Firefox and IE rival pointers are incompatible with cursor.
hand pointers are written in cursor: Hand and cursor: pointer: hand is not supported in ff. An error is returned!
you only need to use cursor: pointer. Both ff and IE support this function!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.