Client Detection Technology

Client-side detection is the most controversial topic in Javascript development. Because of the differences between browsers, different codes are usually compiled based on different browser capabilities.

 

Capability Detection:

Check the browser's capabilities before writing the code.
For example, a script may check whether a function exists before calling a function. This detection method frees developers from considering specific browser types and versions, so that they can focus on the existence of corresponding capabilities. Cannot accurately detect specific browsers and versions.

Geek Detection:

The quirks are actually bugs in the browser. For example, in the early WebKit, there is a quirk, that is, it will return hidden attributes in the for-in loop. Geek detection is usually designed to run a small piece of code and then determine whether the browser has a certain geek. The quirks should be used only when a certain quirks interfere with Script running.

User Agent Detection:

Identifies the browser by detecting the user's proxy string. The user agent string contains a large amount of information related to the browser, including the browser, platform, operating system, and browser version.

 

Detection priority:Capability detection> quirks detection> User Agent Detection(Because the user agent detection is highly dependent on the user agent string)

 

Javascript advanced programming provides the following User Agent Detection Methods:

VaR client = function () {// rendering engine var engine = {ie: 0, Gecko: 0, WebKit: 0, khtml: 0, opera: 0, // complete version: Ver: NULL}; // browser var browser = {// main Browser IE: 0, Firefox: 0, konq: 0, chrome: 0, Safari: 0, // specific Version ver: NULL}; // platform, device, and operating system var system = {win: false, Mac: false, X11: false, // mobile device iPhone: false, iPod: false, nokian: false, winmobile: false, macmobile: false, // game system Wii: false, PS: false }; // Detects the rendering engine and the browser var UA = navigator. useragent;/* during each HTTP request, the user proxy string is sent as the response header and can be sent through navigator. useragent attribute access rendering engine: IE ------ Mozilla Gecko -------- Firefox. At the beginning, Gecko developed safari ------- WebKit as part of the Mozilla Browser, the Web browser chrome ------- WebKit iOS and Android released by Apple are all based on WebKit */If (window. opera) {engine. ver = browser. ver = Window. opera. version (); Engine. opera = browser. opera = parsefloat (engine. ver);} else I F (/applewebkit \/(\ s + )/. test (UA) {engine. ver = Regexp ["$1"]; engine. webKit = parsefloat (engine. ver); // determine whether it is chrmoe or safari if (/chrmoe \/(\ s + )/. test (UA) {browser. ver = Regexp ["$1"]; browser. chrome = parsefloat (browser. ver);} else if (/version \/(\ s + )/. test (UA) {browser. ver = Regexp ["$1"]; browser. safri = parsefloat (browser. ver);} else {// similarly identified version number var safariversion = 1; if (engine. webKit <100) {Safariversion = 1;} else if (engine. webKit <312) {safariversion = 1.2;} else if (engine. webKit <412) {safariversion = 1.3;} else {safariversion = 2;} browser. safari = browser. ver = safariversion;} else if (/khtml \/(\ s + )/. test (UA) |/knoqueror \/([^;] + )/. test (UA) {engine. ver = browser. ver = Regexp ["$1"]; engine. khtml = browser. konq = parsefloat (engine. ver);} else if (/RV :( [^ \)] +) \) Ge CKO \/\ D {8 }/. test (UA) {engine. ver = Regexp ["$1"]; engine. gecko = parsefloat (engine. ver); // determine if it is Firefox if (/Firefox \/(\ s + )/. test (UA) {browser. ver = Regexp ["$1"]; browser. firefox = parsefloat (browser. ver) ;}} else if (/MSIE ([^;] + )/. test (UA) {engine. ver = browser. ver = Regexp ["$1"]; engine. ie = browser. ie = parsefloat (engine. ver);} // check the browser. ie = engine. IE; browser. opera = engine. opera; // Detection platform var P = navigator. platform; system. win = P. indexof ("win") = 0; system. MAC = P. indexof ("Mac") = 0; system. x11 = (P = "X11") | (P. indexof ("Linux") = 0); // checks if (system. win) {If (/WIN (?: Dows )? ([^ Do] {2}) \ s? (\ D + \. \ D + )? /. Test (UA) {If (Regexp ["$1"] = "NT") {Switch (Regexp ["$2"]) {Case "5.0": system. win = "2000"; brreak; Case "5.1": system. win = "XP"; break; Case "6.0": system. win = "vista"; break; Case "6.1": system. win = "win7"; break; default: system. win = "NT"; break;} else if (Regexp ["$1"]) {system. wein = "me";} else {system. win = Regexp ["$1"] ;}}// mobile device system. iPhone = UA. indexof ("iPhone")>-1; system. iPod = UA. indexof ("iPod")>-1; system. nokian = UA. indexof ("nokian")>-1; system. winmobile = (system. win = "CE"); system. macmobile = (system. iPhone | system. iPod); // game system. wii = UA. indexof ("wii")>-1; system. PS =/playstation/I. test (UA); // return the return {Engine: Engine, browser: browser, system: System };}();

 

Experience summary:
1. First, check the most common features to achieve the goal. Earlier IE does not have document. getelementbyid (). First, check document. getelementbyid () and then document. All. First, check the most common features to ensure code optimization, because in most cases, you can avoid testing multiple conditions.

2. Test the specific features to be used. A feature does not necessarily mean that another feature also exists. At the same time, the existence of an attribute cannot determine whether the object exists. For example, VAR result = issortable ({sort: true}) cannot determine whether the object supports sorting. The best way is to check whether sort is a function:
Function issortable (object ){
Return typeof object. Sort = "function ";
}
However, it is worth mentioning that the Host Object in IE8 and earlier versions belongs to com rather than JScript, so typeof document. createelement returns 'object' rather than 'function'