Differences between several JavaScript browsers

JQuery is indeed a very useful library, so you don't have to consider many details. However, as a web Front-end, it is very important to handle and understand the differences between browsers. The following is a summary of the situation where the js library is not used.

1. Set the element class name using the setAttribute Method

In jQuery, you can directly use the attr () method. In Native JS,

// This is W3C standard and is valid in browsers compatible with W3C standards. However, IE is the main element of domestic users. setAttribute ('class', 'newclassname') // This setting can only be valid for element in IE. setAttribute ('classname', 'newclassname') // valid for all browsers (as long as javascript is supported) element. className = 'newclassname'

Well, the beginning is over. The purpose of this article is to introduce the differences between browsers and let the front-end friends know that if the most effective method is used to solve the problem, let's continue.

2. FireFox does not have a window. event object

FireFox does not have a window. event object and only has an event object. In IE, only window. event is supported, whereas in other mainstream browsers, both are supported. Therefore, it is generally written:

function handle(e){e = e || event;...}

3. DOMContentLoaded event Principle

The window. onload event is triggered only when the page parsing/DOM tree is created and all resources such as slices, scripts, and style sheets are downloaded. This is a little too late for many practical applications, which affects the user experience. To solve this problem, a DOMContentLoaded method is added to FF. Compared with onload, this method is triggered earlier. It is triggered after the DOM content of the page is loaded, instead of waiting for loading other resources (this is jquery. ready () event implementation principle ).

// The following is the original analysis bindReady of jQuery 1.4.2: function () {if (readyBound) {return;} readyBound = true; // Catch cases where $ (document ). ready () is called after the // browser event has already occurred. if (document. readyState = "complete") {return jQuery. ready ();} // Mozilla, Opera and webkit nightlies currently support this event if (document. addEventListener) {// Use the handy event callback document. addEventListener ("DOMContentLoaded", DOMContentLoaded, false); // A fallback to window. onload, that will always work window. addEventListener ("load", jQuery. ready, false); // If IE event model is used} else if (document. attachEvent) {// ensure firing before onload, // maybe late but safe also for iframes document. attachEvent ("onreadystatechange", DOMContentLoaded); // A fallback to window. onload, that will always work window. attachEvent ("onload", jQuery. ready); // If IE and not a frame // continually check to see if the document is ready var toplevel = false; try {toplevel = window. frameElement = null;} catch (e) {} if (document.doc umentElement. doScroll & toplevel) {doScrollCheck ();}}}

Design Philosophy-Webkit and Firefox are both directly registered with the DOMContentLoaded event, but because Webkit is introduced in Versions later than 525, there is a compatibility risk. For IE, first register the onreadystatechange event of the document. After testing, this method is equivalent to window. onload and will still be triggered after all resources are downloaded. After that, if it is IE and the page is not in iframe, The doScroll method of documentElement is continuously called through setTiemout until the call is successful, and DOMContentLoaded is triggered. 1. jQuery's solution to IE is that in IE, some DOM methods can be called only after DOM Parsing is complete. doScroll is such a method, in turn, when doScroll can be called, it is the time when DOM Parsing is completed, and the document in prototype. compared with write, this solution can solve the problem that iframe is invalid on the page. In addition, jQuery seems worried that this method will fail when the page is in iframe, so the implementation code makes a judgment. If it is in iframe, it is implemented through onreadystatechange of document, otherwise, it is implemented through doScroll. However, after testing, even in iframe, doScroll is still valid.

4. Learn to use the conditional comments of IE

Many front-ends are always complaining about the Internet Explorer. Indeed, the compatibility issue will become more and more disgusting, but there is no way. Since there is no way to change, please enjoy it...

<! -- [If IE]>  
Let's summarize it here. I hope it will help new users or those who need it.