JQuery source code analysis-06 browser test-Support

Author: nuysoft/high cloud QQ: 47214707 EMail: nuysoft@gmail.com

Disclaimer: This article is an original article. If you need to reprint it, please indicate the source and retain the original article link.

Read, write, or something wrong. Please tell me more about common progress.

6. browser test Support

The differences between browsers are too big. This chapter only introduces the basic idea of jQuery implementing browser compatibility and encapsulates interfaces after various differences. $. The many attributes and implementation methods in support are beyond the original intention of this article (one of the top two). If you are interested, you can search for and read relevant materials.

Compatibility with various mainstream browsers is one of the required courses for JavaScript libraries. Generally, there are two methods for detecting browsers:

L navigator. userAgent Detection Method

L detect the functional features of the browser, that is, the functional features Detection Method

6.1 user proxy Detection

Window. navigator is a Navigator object that contains information about the browser in use:

Attribute	Description
AppCodeName	Code name
AppName	Name
AppVersion	Platform and version information
Platform	Operating system and hardware platform
UserAgent	User proxy header used for HTTP requests

Let's take a look at the test of navigator in IE and Firefox:

L IE8

Attribute	IE8
AppCodeName	Mozilla
AppName	Microsoft Internet Explorer
AppVersion	4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2;. net clr 2.0.50727;. net clr 3.5.30729;. net clr 3.0.30729; Media Center PC 6.0)
Platform	Win32
UserAgent	Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2;. net clr 2.0.50727;. net clr 3.5.30729;. net clr 3.0.30729; Media Center PC 6.0)

L Firefox

Attribute	Firefox
AppCodeName	Mozilla
AppName	Netscape
AppVersion	5.0 (Windows)
Platform	Win32
UserAgent	Mozilla/5.0 (Windows NT 6.1; rv: 5.0) Gecko/20100101 Firefox/5.0

 

The test results are confusing. Now, Chrome, Safari, and Opera cannot be used!

However, we also found that userAgent seems to contain more comprehensive information. When the browser initiates an HTTP request, the userAgent information is used as the User-Agent value in the request header. If the server needs it, it can detect the browser type and adapt the response content accordingly, for example, it can adapt to various types of mobile browsers.

JQuery checks the browser type based on the userAgent attribute and provides the $. browser object. Through $. browser, we can obtain the type and version of the current browser.

$. Browser contains four most popular browser tags (IE, Mozilla, Webkit, and Opera) and versions. Valid tags include:

L webkit

L safari (deprecated)

L opera

L msie

L mozilla

$. Browser can be obtained without waiting for $ (document). ready. Example:

$. Browser. msie/mozilla/webkit/opera $. Browser. version

Because $. browser detects browser types based on navigator. userAgent, it is easy to be spoofed by users and browsers, and lacks flexibility and comprehensiveness. Therefore, it is best to avoid writing code based on a specific browser. Compared with $. browser, $. support is more effective in detecting browser-specific features.

The API documentation shows that jQuery. browser may be moved to a plug-in the future.

The implementation code of $. browser is as follows:

// User proxy detection Regular Expression Definition Var... Rwebkit =/(webkit) [\/] ([\ w.] + )/, Ropera =/(opera )(? :. * Version )? [\/] ([\ W.] + )/, Rmsie =/(msie) ([\ w.] + )/, Rmozilla =/(mozilla )(? :.*? Rv :( [\ w.] + ))? /, // Attributes are retrieved everywhere and used as local variables, which can reduce cross-scope queries and improve performance. UserAgent = navigator. userAgent, // User proxy matching result BrowserMatch,

// Actually execute the matching function UaMatch:Function(Ua ){ Ua = ua. toLowerCase (); // Match each browser in sequence VarMatch = rwebkit.exe c (ua) | Ropera.exe c (ua) | Rmsie.exe c (ua) | Ua. indexOf ("compatible") <0 & rmozilla.exe c (ua) | []; // Match [1] | "": When match [1] is false (null String, null, undefined, 0, etc.), the default value is "" // Match [2] | "0": When match [2] is false (null String, null, undefined, 0, etc.), the default value is "0" Return{Browser: match [1] | "", version: match [2] | "0 "};},

// Save the test result to jQuery. browser BrowserMatch = jQuery. uaMatch (userAgent ); If(BrowserMatch. browser ){ JQuery. browser [browserMatch. browser] =True; JQuery. browser. version = browserMatch. version; } // Safari flag is not recommended, instead of webkit If(JQuery. browser. webkit ){ JQuery. browser. safari =True; }

6.2 Feature Detection

That is, the Execution Branch of the program is determined based on whether the browser supports a specific feature. This method does not consider the browser type and version, or the changes caused by browser upgrades, it is more secure, flexible, and reduces maintenance work. Therefore, it has become the mainstream detection method. For example, the Code for binding a load event:

// Compatible with the event model. It detects the functional features of the browser rather than sniffing the browser. If(Document. addEventListener ){ // Use the handy event callback // Use a fast loading completion event Document. addEventListener ("DOMContentLoaded", DOMContentLoaded,False);   // A fallback to window. onload, that will always work // Register the window. onload callback function Window. addEventListener ("load", jQuery. ready,False);   // If IE event model is used // For IE event model }ElseIf(Document. attachEvent ){ // Ensure firing before onload, // Maybe late but safe also for iframes // Make sure that onreadystatechange is triggered before onload, which may be slower but safer for iframes Document. attachEvent ("onreadystatechange", DOMContentLoaded );   // A fallback to window. onload, that will always work // Register the window. onload callback function Window. attachEvent ("onload", jQuery. ready );   // If IE and not a frame // Continually check to see if the document is ready VarToplevel =False;   Try{ Toplevel = window. frameElement =Null; }Catch(E ){}   If(Document.doc umentElement. doScroll & toplevel ){ DoScrollCheck (); } }

6.3 Box Model

The box model is a concept in CSS. CSS regards all webpage elements as a rectangle frame, which consists of the content, padding, and border) and margin (margin) composition, such as (from http://www.w3.org/TR/css3-box ):

 

Two box models

L Traditional IE model: the width and height attributes include the padding and Border width.

L W3C standard model: the width and height attributes do not contain margins and Border width.

JQuery. boxModel

JQuery provides the boxModel attribute. When jQuery. boxModel is set to true, it indicates that the W3C box model is supported, and false indicates that the traditional IE box model is supported.

Dimension Encapsulation

JQueryn encapsulates the differences between the two box models, unified as the W3C standard model, and provides the modified interface:

Interface	Calculation Formula
Width, height	Content
InnerWidth, innerHeight	Content + padding
OuterWidth, outerHeight	Content + padding + border + optional margin

LastAn interesting figure is provided. What Chrome saw when it was released will give a smile, not to mention: