Javascript Client Detection Technology

1. Firefox Gecko is the rendering engine of firefox. The original Gecko was developed as part of the general Mozilla browser, and the first browser using the Gecko engine was Netscape6; we can use it...

　　1. Firefox

Gecko is the rendering engine of firefox. The original Gecko was developed as part of the general Mozilla browser, and the first browser using the Gecko engine was Netscape6;

We can use the following JS Code to detect the situation:

var ua = navigator.userAgent;console.log(ua);

Print the following in firefox in windows:

Mozilla/5.0 (Windows NT 6.1; WOW64; rv: 38.0) Gecko/20100101 Firefox/38.0

These are some of the proxy strings written for Netscape6:

Mozilla/Mozilla version number (platform; encryption type; operating system or CPU; pre-release version; Gecko/Gecko version number; application or product/application or product version number );

　　2. Safari

The Safari rendering engine is WebKit. It is a branch of the KHTML rendering engine of the Konqueror browser on the Linux platform. Several years later, webkit was independently developed into an open-source project, focusing on the development of the rendering engine;

The following code:

var ua = navigator.userAgent;console.log(ua);

Print the following in safari in windows:

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

Webkit user proxy strings are in the following format:

Mozilla/5.0 (platform; encryption type; operating system or cpu) AppleWebkit/AppleWebkit version number (KHTML, like Gecko) safari/safari version number;

　　3. Chrome

Google chrome uses webkit as the rendering engine and uses different javascript Engines;

The following JS Code:

var ua = navigator.userAgent;console.log(ua);

Print the following in chrome in windows:

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.152 Safari/537.36

The user agent string is completely self-Fetch webkit and only a section is added to indicate the chrome version number. The format is as follows:

Mozilla/5.0 (platform; encryption type; operating system or cpu) AppleWebKit/AppleWebKit version number (KHTML, like Gecko) chrome/chrome version number safari/safari version number

　　4. Opera

Opera's default user agent string is the most reasonable in all modern browsers-it correctly identifies its own extremely version number before Opera8.0; its user agent string adopts the following format:

Opera/version number (operating system or CPU; encryption type) [language]

After Opera8 is released, the "language" part of the user proxy string is moved into parentheses to better match with other browsers, as shown below:

Opera/version number (operating system or CPU; encryption type; language)

In the latest version opera29,

The following JS Code:

var ua = navigator.userAgent;console.log(ua);

Proxy Detection:

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.152 Safari/537.36 OPR/29.0.1795.60;

　　5. IE

Since IE3, Microsoft has modified IE's user proxy string to a form compatible with Netscape. The structure is as follows:

Mozilla/version number (platform; encryption type; operating system or CPU );

However, the IE8 + User proxy string adds the rendering engine's (Trident) version number;

The JS Code is as follows:

var ua = navigator.userAgent.toLowerCase();console.log(ua);

For example, IE7 in window is as follows:

Mozilla/4.0 (compatible; msie 7.0; windows nt 6.1; wow64; trident/7.0; slcc2 ;. net clr 2.0.50727 ;. net clr 3.5.30729 ;. net clr 3.0.30729; media center pc 6.0; infopath.3 ;. net4.0c ;. net4.0e)

IE8 is as follows:

Mozilla/4.0 (compatible; msie 8.0; windows nt 6.1; wow64; trident/7.0; slcc2 ;. net clr 2.0.50727 ;. net clr 3.5.30729 ;. net clr 3.0.30729; media center pc 6.0; infopath.3 ;. net4.0c ;. net4.0e)

However, IE9 + has made some adjustments to the string format. The mozilla version has increased to 5.0;

IE9 is as follows:

Mozilla/5.0 (compatible; msie 9.0; windows nt 6.1; wow64; trident/7.0; slcc2 ;. net clr 2.0.50727 ;. net clr 3.5.30729 ;. net clr 3.0.30729; media center pc 6.0; infopath.3 ;. net4.0c ;. net4.0e)

IE10 is as follows:

Mozilla/5.0 (compatible; msie 10.0; windows nt 6.1; wow64; trident/7.0; slcc2 ;. net clr 2.0.50727 ;. net clr 3.5.30729 ;. net clr 3.0.30729; media center pc 6.0; infopath.3 ;. net4.0c ;. net4.0e)

IE11 is as follows:

Mozilla/5.0 (windows nt 6.1; wow64; trident/7.0; slcc2 ;. net clr 2.0.50727 ;. net clr 3.5.30729 ;. net clr 3.0.30729; media center pc 6.0; infopath.3 ;. net4.0c ;. net4.0e; rv: 11.0) like gecko

　　6. IOS and Android

The default browsers for IOS and Android in the mobile operating system are based on webkit, and all of them are the same as those for the desktop version. They share the same basic user agent string format. The basic format of ios devices is as follows:

Mozilla/5.0 (platform; encryption type; operating system or CPU like Mac OS x; language)

AppleWebKit/AppleWebKit Version (KHTML, like Gecko) Version/browser Version

Mobile/Mobile version Safari/Safari version

In the Android browser, the default format is similar to that in IOS, and there is no Mobile version number (but there is a Mobile mark ):

Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91)

AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

　　7. Konqueror

Konqueror integrated with KDE Linux is a browser based on the KHTML open source rendering engine. Although Konqueror only

It can be used in Linux, but it also has a considerable number of users. To ensure maximum compatibility, Konqueror chose

User Agent string format:

Mozilla/5.0 (compatible; Konqueror/version; operating system or CPU)

However, to stay consistent with the changes in the WebKit user proxy string, Konqueror 3.2 has changed again in the following format:

Identify yourself as KHTML:

Mozilla/5.0 (compatible; Konqueror/version; operating system or CPU) KHTML/KHTML version (like Gecko)

The following is an example:

Mozilla/5.0 (compatible; Konqueror/3.5; SunOS) KHTML/3.5.0 (like Gecko)

User Agent string Detection Technology

　　Recognition rendering engine;

The following describes five major rendering engines: IE, Gecko, WebKit, KHTML, and Opera.

The following code:

Var client = function () {var engine = {// rendering engine ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, // other version number ver: null}; // The rendering engine, platform and device return {engine: engine };}();

In the preceding client object literal volume, each rendering engine corresponds to an attribute. The default attribute value is 0. If the rendering engine is detected, the engine version number is written into the corresponding attribute in the form of a floating point value. The full version of the rendering engine is written into the variable ver attribute;

To correctly identify the rendering engine, the key is that the detection sequence should be correct. There are many inconsistencies in the user proxy string. If the detection sequence is incorrect, the detection results may be incorrect. Therefore, the first step is to identify Opera, because its user proxy string may mimic other browsers. Currently, the latest operabrowser version is 29, so the following:

　

　var ua = navigator.userAgent .toLowerCase();　　console.log(ua);

Print as follows:

　　mozilla/5.0 (windows nt 6.1; wow64) applewebkit/537.36 (khtml, like gecko) chrome/42.0.2311.152 safari/537.36 opr/29.0.1795.60

Therefore, the code can be determined as follows:

var ua = navigator.userAgent.toLowerCase();if(ua.match(/opr\/([\d\.]+)/)) {    var result = ua.match(/opr\/([\d\.]+)/);    console.log(result)    console.log(result[1])}

Run the following command:

Console. log (result); print as follows:

　　["opr/29.0.1795.60", "29.0.1795.60", index: 110, input: "mozilla/5.0 (windows nt 6.1; wow64) applewebkit/53…rome/42.0.2311.152 safari/537.36 opr/29.0.1795.60"]；

Console. log (result [1]) is printed as follows:

　　29.0.1795.60

Therefore, we can write the code as follows:

var ua = navigator.userAgent.toLowerCase();if(ua.match(/opr\/([\d\.]+)/)) {    var result = ua.match(/opr\/([\d\.]+)/);    engine.ver = result[1];    engine.opera = parseFloat(engine.ver);}

Now let's print console. log (engine); as shown below:

But in versions earlier than opera29, Opera5 + also has windows. opera object, so we must also detect windows. opera object. We can call the version () method to return a string indicating the browser version. The following code:

if(window.opera) {    engine.ver = window.opera.version();    engine.opera = parseFloat(engine.ver);}

Now, to be compatible with the operabrowser, we can combine the following:

var engine = client;var ua = navigator.userAgent.toLowerCase();if(ua.match(/opr\/([\d\.]+)/) || window.opera) {    var result = ua.match(/opr\/([\d\.]+)/);    engine.ver = result[1];    engine.opera = parseFloat(engine.ver);    if(window.opera) {        engine.ver = window.opera.version();        engine.opera = parseFloat(engine.ver);    }}

In step 2, we need to check that the engine is WebKit, because the user proxy string of WebKit contains the "Gecko" and "KHTML" strings. If we detect these two strings, there may be errors, however, the "AppleWebKit" in the user proxy string of WebKit is unique and can be used for detection;

var engine = client;var ua = navigator.userAgent.toLowerCase();if(/applewebkit\/(\S+)/.test(ua)) {    engine.ver = RegExp["$1"];    engine.webkit = parseFloat(engine.ver);}

Therefore, all the above Code is as follows:

var engine = client;var ua = navigator.userAgent.toLowerCase();if(ua.match(/opr\/([\d\.]+)/) || window.opera) {    var result = ua.match(/opr\/([\d\.]+)/);    engine.ver = result[1];    engine.opera = parseFloat(engine.ver);    if(window.opera) {        engine.ver = window.opera.version();        engine.opera = parseFloat(engine.ver);    }}else if(/applewebkit\/(\S+)/.test(ua)) {    engine.ver = RegExp["$1"];    engine.webkit = parseFloat(engine.ver);}

The rendering engine to be tested next is KHTML. Similarly, the KHTML user proxy string also contains "Gecko". Therefore, before KHTML is excluded, we cannot accurately detect the Gecko-based browser. The version number of KHTML is similar to that of WebKit in the format of the user agent string, so you can also use regular expressions. In addition, because Konqueror 3.1 and earlier versions do not contain the version of KHTML, therefore, we must use the Konqueror version instead. The following is the corresponding detection code.

if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){    engine.ver = RegExp["$1"];    engine.khtml = parseFloat(engine.ver);}

The following is all the code:

var engine = client;var ua = navigator.userAgent.toLowerCase();if(ua.match(/opr\/([\d\.]+)/) || window.opera) {    var result = ua.match(/opr\/([\d\.]+)/);    engine.ver = result[1];    engine.opera = parseFloat(engine.ver);    if(window.opera) {        engine.ver = window.opera.version();        engine.opera = parseFloat(engine.ver);    }}else if(/applewebkit\/(\S+)/.test(ua)) {    engine.ver = RegExp["$1"];    engine.webkit = parseFloat(engine.ver);}else if (/khtml\/(\S+)/.test(ua) || /konqueror\/([^;]+)/.test(ua)){    engine.ver = RegExp["$1"];    engine.khtml = parseFloat(engine.ver);}

After WebKit and KHTML are excluded, Gecko can be accurately detected. However, the version number of Gecko does not appear after the string "Gecko" in the user agent string, it appears after the string "rv. Therefore, a more complex regular expression must be used;

For example, the user agent in firefox is as follows:

Mozilla/5.0 (Windows NT 6.1; WOW64; rv: 38.0) Gecko/20100101 Firefox/38.0

Check the following JS Code:

var engine = client;var ua = navigator.userAgent.toLowerCase();if(/rv:([^\)]+)\) gecko\/\d{8}/.test(ua)){    engine.ver = RegExp["$1"];    engine.gecko = parseFloat(engine.ver);}

So all JS Code is as follows:

var engine = client;var ua = navigator.userAgent.toLowerCase();if(ua.match(/opr\/([\d\.]+)/) || window.opera) {    var result = ua.match(/opr\/([\d\.]+)/);    engine.ver = result[1];    engine.opera = parseFloat(engine.ver);    if(window.opera) {        engine.ver = window.opera.version();        engine.opera = parseFloat(engine.ver);    }}else if(/applewebkit\/(\S+)/.test(ua)) {    engine.ver = RegExp["$1"];    engine.webkit = parseFloat(engine.ver);}else if (/khtml\/(\S+)/.test(ua) || /konqueror\/([^;]+)/.test(ua)){    engine.ver = RegExp["$1"];    engine.khtml = parseFloat(engine.ver);}else if(/rv:([^\)]+)\) gecko\/\d{8}/.test(ua)){    engine.ver = RegExp["$1"];    engine.gecko = parseFloat(engine.ver);}

The last check is the IE browser. The IE version number is located behind the string "msie" and is preceded by a semicolon:

Mozilla/5.0 (compatible; msie 9.0; windows nt 6.1; wow64; trident/7.0; slcc2 ;. net clr 2.0.50727 ;. net clr 3.5.30729 ;. net clr 3.0.30729; media center pc 6.0; infopath.3 ;. net4.0c ;. net4.0e)

Check the following JS Code:

if (/msie ([^;]+)/.test(ua)){    engine.ver = RegExp["$1"];    engine.ie = parseFloat(engine.ver);}

All the code is as follows:

Var client = function () {var engine = {// rendering engine ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, // other version number ver: null}; // The rendering engine, platform and device return {engine: engine };} (); var engine = client; var ua = navigator. userAgent. toLowerCase (); if (ua. match (/opr \/([\ d \.] +)/) | window. opera) {var result = ua. match (/opr \/([\ d \.] +)/); engine. ver = result [1]; engine. opera = parseFloat (engine. ver); if (window. opera) {engine. ver = window. opera. version (); engine. opera = parseFloat (engine. ver) ;}} else if (/applewebkit \/(\ S + )/. test (ua) {engine. ver = RegExp ["$1"]; engine. webkit = parseFloat (engine. ver);} else if (/khtml \/(\ S + )/. test (ua) |/konqueror \/([^;] + )/. test (ua) {engine. ver = RegExp ["$1"]; engine. khtml = parseFloat (engine. ver);} else if (/rv :( [^ \)] +) \) gecko \/\ d {8 }/. test (ua) {engine. ver = RegExp ["$1"]; engine. gecko = parseFloat (engine. ver);} else if (/msie ([^;] + )/. test (ua) {engine. ver = RegExp ["$1"]; engine. ie = parseFloat (engine. ver );}

Recognize browsers

In most cases, the above identified engine cannot meet our needs. For example, Apple's safari browser and Google's chrome browser both use webkit as the rendering engine; but their javascript Engines are different. In these two browsers, client. webkit returns non-0 values, which cannot be differentiated. Therefore, we need to identify the browser;

Add the following code:

Var client = function () {var engine = {// rendering engine ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, // other Version ver: null}; var browser = {// ie: 0, firefox: 0, safari: 0, konq: 0, opera: 0, chrome: 0, // other versions of ver: null}; // detect the rendering engine, platform and device return {engine: engine, browser: browser };}();

The private variable browser is added to the Code above to save the attributes of each major browser. Like the engine Variable, other attribute values except the browser currently in use will be kept as 0; if the browser is currently in use, the version number in the floating point numeric form is saved in this attribute. If necessary, the ver attribute in browser contains the complete browser version number in string form;

Therefore, the encapsulated JavaScript code is as follows:

Var client = function () {var engine = {// rendering engine ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, // other Version ver: null}; var browser = {// ie: 0, firefox: 0, safari: 0, konq: 0, opera: 0, chrome: 0, // other versions of ver: null}; // The rendering engine, platform and device return {engine: engine, browser: browser };} (); var engine = client; var browser = client; var ua = navigator. userAgent. toLowerCase (); if (ua. match (/opr \/([\ d \.] +)/) | window. opera) {var result = ua. match (/opr \/([\ d \.] +)/); engine. ver = browser. ver = result [1]; engine. opera = browser. opera = parseFloat (engine. ver); if (window. opera) {engine. ver = browser. ver = window. opera. version (); engine. opera = browser. opera = parseFloat (engine. ver) ;}} else if (/applewebkit \/(\ S + )/. test (ua) {engine. ver = RegExp ["$1"]; engine. webkit = parseFloat (engine. ver); // determine whether it is chrome or safari/** chrome user proxy string * Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) * Chrome/42.0.2311.152 Safari/537.36 */if (/chrome \/(\ S + )/. test (ua) {browser. ver = RegExp ["$1"]; browser. chrome = parseFloat (browser. ver);} else if (/version \/(\ S + )/. test (ua) {/** safari user proxy string * Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) * Version/5.1.7 Safari/534.57.2 */browser. ver = RegExp ["$1"]; browser. safari = parseFloat (browser. ver);} else {// approximately determines the 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) |/konqueror \/([^;] + )/. test (ua) {engine. ver = browser. ver = RegExp ["$1"]; engine. khtml = browser. konq = parseFloat (engine. ver);} else if (/rv :( [^ \)] +) \) gecko \/\ d {8 }/. test (ua) {engine. ver = RegExp ["$1"]; engine. gecko = parseFloat (engine. ver);/** the firefox user proxy string * Mozilla/5.0 (Windows NT 6.1; WOW64; rv: 38.0) * Gecko/20100101 Firefox/38.0 * // determine if it is firefox if (/firefox \/(\ S + )/. test (ua) {browser. ver = RegExp ["$1"]; browser. firefox = parseFloat (browser. ver) ;}} else if (/msie ([^;] + )/. test (ua) | "ActiveXObject" in window) {if ("ActiveXObject" in window) {if (/msie ([^;] + )/. test (ua) {engine. ver = browser. ver = RegExp ["1"]; engine. ie = browser. ie = parseFloat (engine. ver);} else {// ie11 + if (/rv :( [^ \)] + )\)/. test (ua) {engine. ver = browser. ver = RegExp ["1"]; engine. ie = browser. ie = parseFloat (engine. ver);} else {// ie11 + if (/rv :( [^ \)] + )\)/. test (ua) {engine. ver = browser. ver = RegExp ["1"]; engine. ie = browser. ie = parseFloat (engine. ver) ;}}}// you can print the console. log (browser );

For opera and IE, the value in the browser object is equal to the value in the engine object. For Konqueror, browser.

The konq and browser. ver attributes are equal to the engine. khtml and engine. ver attributes respectively. To detect Chrome and Safari, we added the if statement to the detection engine code. When extracting the Chrome version number, you need to find the string "chrome/" and obtain the value following the string. When extracting the Safari version number, you need to find the string "version/" and obtain the value after it. This method is only applicable to Safari 3 and later versions. Therefore, some spare code is required to map the WebKit version number to the Safari version number (as for else, we will not talk about it more ). When detecting the Firefox version, first find the string "firefox/", and then extract the value following the string.

With the above code, we can write the following code to judge, the following code:

If (client. engine. webkit) {// if it's WebKit if (client. browser. chrome) {// execute code for Chrome} else if (client. browser. safari) {// run the code for Safari} else if (client. engine. gecko) {if (client. browser. firefox) {// execute code for Firefox} else {// execute code for other Gecko browsers }}

Identification Platform

At present, there are three major platforms (windows, Mac, Unix (including various linux); because those browsers (safari, opera, firefox) may have different problems on different platforms; to detect these platforms, you also need to add a new object as follows;

Var client = function () {var engine = {// rendering engine ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, // other Version ver: null}; var browser = {// ie: 0, firefox: 0, safari: 0, konq: 0, opera: 0, chrome: 0, // for other versions, ver: null}; var system = {win: false, mac: false, xll: false}; // The rendering engine is detected here, platform and device return {engine: engine, browser: browser, system: system };}();

The code above adds a new variable system with three attributes. The win attribute indicates whether it is a windows platform, mac indicates Mac, and xll indicates Unix, the default attribute of the system object is false. When determining the platform, check navigator. platform is easier than detecting user proxy strings. It checks that user proxy strings provide different platform information in different browsers, while navigator. possible values of the platform attribute include "Win32", "Win64", "MacPPC", "MacIntel", "Xll", and "Linux i686 ", these values are consistent in different browsers, and the detection code is very intuitive. The following code:

var system = client;var platform = navigator.platform;system.win = platform.indexOf("Win") == 0;system.mac = platform.indexOf("Mac") == 0;system.x11 = (platform.indexOf("X11") == 0) || (platform.indexOf("Linux") == 0);

For example, I print the following in chrome:

Console. log (system)

As follows:

If I want to know whether it is win32 or win64, We can print it using this code.

Console. log (navigator. platform );

Identify mobile devices

You can set the response attribute values by simply checking the string "iPhone", "iPod", and "iPad.

system.iphone = ua.indexOf(“iphone”) > -1;system.ipod = ua.indexOf(“ipod”) > -1;system.ipad = ua.indexOf(“ipad”) > -1;

The above is the content of the javascript Client Detection Technology. For more information, see the PHP Chinese website (www.php1.cn )!