Javascript-Browser-compatible client detection

Front-end development The most annoying thing is browser-compatible, because there are differences between browsers, so we need to write different code according to different browsers, we usually practice is the client detection. Here are three more common detection methods:

First, ability testing (priority)

The ability to detect pending browsers before writing the code, as long as the browser supports specific capabilities, can give a solution, for example:

The previous version of IE5 does not support Document.getelemnetbyid (), but can be replaced with non-standard document.all (), and our code can be written like this:

function getId (ID) {    if(document.getElementById ()) {        return  document.getElementById (ID);    } Else if (document.all ()) {        return  document.add (ID);    } Else {        thrownew Error (" cannot get element ");}    }

In capability detection, keep these two important concepts in mind:

1, first detect the most common characteristics of the target to ensure that the code optimization, because most of the conditions can avoid the detection of multiple conditions

2, must test the actual use of the characteristics, a feature does not exist, does not mean that another feature does not exist

Ii. Quirks Detection (second choice)

The goal of quirks detection is to identify the specific behavior of the browser, to know what "bugs" the browser has, and usually to run a small piece of code to determine that a particular feature is not working.

See Example

There is a bug in IE8 and previous versions, and if an instance property has the same name as a prototype property marked false by [[Enumerable]], then the prototype property will not appear in the for-in loop. The previous version will enumerate the hidden attributes. \ Safari3

varhasenumquik=function(){    varobj={toString:function(){}    };  for(varPropertyinchobj) {        if(property== "toString") {//is enumerated, indicating that there is a bug            return true; }    }    return false;};varhasenumshadowquik=function(){    varobj={toString:function(){}    }; varCount=0;  for(varPropertyinchobj) {        if(property== "ToString") {Count++;//If the number that is enumerated is more than 2, the description is enumerated.        }    }    return(count>1);}

It's often our practice to perform quirks detection at the beginning of a script so that the problem can be resolved as soon as possible.

Third, the user agent detection (last resort)

The user agent string contains a large number of browser-related information, including the browser, platform, operating system, and browser version. But the browser can add some wrong information in its user agent string, to deceive the server, also known as "electronic spoofing."

Javascript-Browser-compatible client detection