Because of the differences between various browsers on the market and the "quirks" of different browsers, we may need client-side detection during development to ensure that our code runs smoothly across all browsers
The first of the most commonly used client-side detection- capability detection . The goal of competency detection is not to identify specific browsers, but to identify the capabilities of the browser
if (object.propertyinquestion) { // use Object.propertyinquestion}
is to check whether the browser supports the method or property you want to use before running the code, and if you can't run the targeted code
The second client-side detection-the goal of the " quirks" detection is to identify the specific behavior of the browser, but unlike the ability detection to confirm what the browser supports, quirks detect what bugs (that is, bugs) the browser has.
Today in reading a lot of this quirks, suddenly think of a previous interview to see a problem when you have to tell you have seen the bug, then by the way to remember
- A bug exists in IE8 and earlier that if an instance property has the same name as a prototype property marked false by [[Enumerable]], then the instance property will not appear in the for-in loop
- Previous versions of Safari 3 enumerate hidden properties
- The CloneNode () method does not copy JavaScript attributes added to the DOM node, such as event handlers, where IE has a bug where it replicates event handlers
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li></ul >var myList = document.getElementsByTagName ("ul"); var deeplist = Mylist.clonenode (true); alert (deepList.childNodes.length); // 3 (ie<9) or 7 (other browsers)
IE8 and earlier versions do not work with whitespace characters in other browsers, and the previous version does not create a node for the whitespace character IE9
- IE8 and earlier versions do not differentiate the case of IDs, and if the ID values of multiple elements in the page are the same, getElementById () returns only the first occurrence of the element in the document
- IE7 and the following versions have an interesting quirk: the form elements that match the name attribute to the given ID (<input>,<textarea>,<button> and <select>) are also returned by the method
<input type= "text" name= "myelement" value= "text"/><div id= "myelement" >a div</div>
Call document.getElementById ("MyElement") and the result will return the <input> element
- IE7 Previously, the GetAttribute () method was used to access the style attribute (returning an object) or the OnClick event processing attribute (returning a function), the value returned is the same as the value of the property, and SetAttribute () has some unusual behavior. The class and style attributes set by this method have no effect, and the event handler feature is set as well
There are many quirks, later encountered, but feel the industry to ie deeply malicious, is simply the whole world for IE AH
The third kind of client detection-- user agent detection
is to directly determine what brand of browser you use, what rendering engine, what version, what platform.
Rendering Engine:
There are five major rendering engines: IE, Gecko, Webkit, Khtml, Opera
IE is IE browser.
Gecko is the rendering engine for Firefox
Webkit the Safari Chrome browser (his rendering engine or Webkit, just using a different JavaScript engine) Webkit was originally a branch of the khtml rendering engine, and later became independent and open source, focusing on the development of the rendering engine
Khtml Konqueror Browser can only be used in Linux
Opera (Presto) Opera browser
JavaScript Advanced Program design has a complete user agent detection script code, including detection rendering engine, platform, Windows operating system, mobile devices and game systems need to be able to query
JavaScript client detection records some "quirks"