Analysis on compatibility with various Javascript browsers _ javascript skills

Source: Internet
Author: User
With the rise of third-party browsers represented by Firefox, our Website Cannot Be JUSTIE any more. If we put some original javascript code in a browser other than IE, this section describes how to improve JS to make it more standardized and compatible. With the rise of third-party browsers represented by Firefox, our website cannot be just ie any more. If we put some original javascript code in a browser other than IE, this section describes how to improve JS to make it more standardized and compatible.

Sample Code:

 
 
 
Do not eat apple

Try to use W3C DOM

The previously accessed objects may be:
Document. all. apple or apple
Now we should use:
Document. getElementById ("apple") is used to access the object, and an ID must be unique on the page.
Document. getElementsByTagName ("p") [0] access the object by Tag Name

The property of the originally set object may be:
Document. all. apple. width = 100 or apple. width = 100
Now we should use:
Document. getElementById ("apple"). setAttribute ("width", "100 ")
Document. getElementsByTagName ("p") [0]. setAttribute ("width", "100 ")
The properties of the access object are as follows:
Document. getElementById ("apple"). getAttribute ("width ")
Document. getElementsByTagName ("p") [0]. getAttribute ("width ")

W3C DOM restrictions in IE

Because the first IE account for 95% of the total browser, there is no competition pressure, so the boss is hard to play a different way, not fully according to WEB standards.

In IE, you cannot correctly use setAttribute to set the style, class, and Event Response attributes of an object,
Therefore, I have to access and set it according to the original logging method to achieve compatibility with various browsers, such:

Document. getElementById ("banana "). class document. getElementById ("banana "). style. color document. getElementById ("banana "). onclick document. getElementById ("banana "). class = "fruit" document. getElementById ("banana "). style. color = "blue" document. getElementById ("banana "). onclick = function () {alert ("I Am a banana ")}

Onload in Firefox

Function over () {alert ("Page loaded ")}

Normally, the onload response function is:
Document. body. onload = over
But it cannot be executed in Firefox,
Therefore, we all adopt the following form:
Window. onload = over

About the problem that the TABLE cannot Insert a new row in IE

Whether innerHTML or appendChild is used to insert a TABLE in IEBut other browsers do not. The solution isAdded to TABLEElement, as shown below:

Var row = document. createElement ("tr"); var cell = document. createElement ("td"); var cell_text = document. createTextNode ("bananas do not eat apples"); cell. appendChild (cell_text); row. appendChild (cell); document. getElementsByTagName ("tbody") [0]. appendChild (row );

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) Others

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 ):

...

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.