Capability detection
The ability to detect a specific browser before writing code. For example, a script may have to detect the existence of a down payment for a function before calling it. This detection method frees developers from considering specific browser types and versions, allowing them to focus on whether the corresponding capabilities exist. Capability detection cannot accurately detect specific browsers and versions.
Quirk detection
Quirks are actually bugs in browser implementations. For example, there was a quirk in early webkits, that is, it would return hidden attributes in the for-in loop. Quirk detection usually involves running a piece of code and then determining if a browser has a quirk. Because quirk detection cannot accurately detect specific browsers and versions.
User Agent Detection
Identify the browser by detecting the user agent string. The user agent string contains a large amount of browser-related information, including the browser, platform, operating system and browser version. User agent strings have a considerable development history. During this period, the browser provider view always adds some deceptive information to the user agent string, and deceives the website into detail its own browser is another browser. User agent detection requires special skills, especially be aware that Opera hides its user agent strings. Even so, the rendering engine used by the browser and the platform used by the mobile device and gaming system can still be detected through the user agent string.
During each HTTP request, the user agent string is sent as a response header, and the string can be accessed through the navigator.userAgent property of Javascript. On the server side, it is a common and widely accepted practice to determine the browser used by detecting the user agent string. On the client side, user agent detection is generally regarded as a last resort, with priority following capability detection and quirk detection.
var client = function(){ // rendering engine var engine = { ie:0, gecko:0, webkit:0, khtml:0, opera:0, // full version number ver:null }; // browser var browser = { // main browser ie:0, firefox:0, safari:0, konq:0, opera:0, chrome:0, // specific version number ver:null }; // detect rendering engine and browser var ua = navigator.userAgent; 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 if (/Chrome//(/S+)/.test(ua)) { browser.ver = RegExp["$1"]; browser.chrome = parseFloat(engine.ver); } else if (/Version//(S+)/.test(ua)) { browser.ver = RegExp["$1"]; browser.safari = parseFloat(browser.ver); } else { // Approximately determine 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.kong = parseFloat(engine.ver); } else if (/rv:([^/)]+)/) Gecko///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); } // Detect browser browser.ie = engine.ie; browser.opera = engine.opera; // Return these objects return { engine:engine, browser: browser }}();console.log(client.engine);console.log(client.browser);Tangram detects browser source code
/** * Declare baidu package*/var baidu = baidu || {version: "1-3-2"}; // meizz 20100513 Upgrade guid to /x06baidu.guid = "$BAIDU$";//Propose guid to prevent modification of window[undefined] 20100504 berg/** * meizz 2010/02/04 * The top-level domain baidu may be hijacked by closures, and the following object is required when page-level unique information is required*/window[baidu.guid] = window[baidu.guid] || {};/** * Declare baidu.browser package*/baidu.browser = baidu.browser || {};/** * Determine whether it isGecko */baidu.browser.isGecko = /gecko/i.test(navigator.userAgent) && !/like gecko/i.test(navigator.userAgent);/** * Determine whether it isWebkit */baidu.browser.isWebkit = /webkit/i.test(navigator.userAgent);/** * Determine whether it is standard mode*/baidu.browser.isStrict = document.compatMode == "CSS1Compat";/** * Determine whether it is safari browser*/if ((/(/d+/./d)(/./d)?/s+safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent))) { baidu.browser.safari = parseFloat(RegExp['/x241']);}/** * Determine whether it is an opera browser*/if (/opera//(/d+/./d)/i.test(navigator.userAgent)) { baidu.browser.opera = parseFloat(RegExp['/x241']);}/** * Determine whether it is a chrome browser*/if (/chrome//(/d+/./d)/i.test(navigator.userAgent)) { baidu.browser.chrome = parseFloat(RegExp['/x241']);}/** * Determine whether it is an ie browser*/if (/msie (/d+/./d)/i.test(navigator.userAgent)) { baidu.ie = baidu.browser.ie = document.documentMode || parseFloat(RegExp['/x241']);}/** * Determine whether it is a firefox browser*/if (/firefox//(/d+/./d)/i.test(navigator.userAgent)) { baidu.browser.firefox = parseFloat(RegExp['/x241']); // '/x241' is the octal notation '/x24' corresponding character '$' , so '/x241' is equivalent to '$1'}