Use jQuery to detect the script code of browsers and versions

How to use Javascript to detect browsers is a common issue. Based on my experience, using Javascript to detect browsers is nothing more than two types of methods.

The first is to use the functional properties of the browser. For example, you can check whether the browser supports the getElementById method.

If (document. getElementById ){
// The method exists, so use it here
} Else {
// Do something else
}

Although such a check does not know which browser the user uses, it is up to the test for developers to determine whether the browser is compatible with their own code. This method can be used if you focus on the actual functions of the browser and do not care about its actual identity.

The second is to use the traditional user-agent string, which may be the oldest and most popular detection method. Although technically speaking, you can change your user-agent, you can use it to obtain some useful information.

This may be a problem. Anyone who has used jQuery knows that using jQuery's brower method can accurately determine the browser or even version users are using. If users of a good development library want to understand some of its implementation mechanisms, how does jQuery achieve this?

View jQuery's latest source code (version 1.2.2). From row 1,195th to line 1205, it is a function for judging the browser. As you can see, jQuery uses the second method above, that is, using user-agent to determine the user's browser and version.

Frankly speaking, at first I was surprised to know the types and versions of browsers with just five lines of code. In Javascript advanced programming, the author even uses a separate chapter to describe how to use Javascript to determine the browser and operating system. However, by reading its Code (which is not difficult in fact), I suddenly realized it. Paste the code.

Var userAgent = navigator. userAgent. toLowerCase ();

// Figure out what browser is being used
JQuery. browser = {
Version: (userAgent. match (/. + (? : Rv | it | ra | ie) [\/:] ([\ d.] +)/) | []) [1],
Safari:/webkit/. test (userAgent ),
Opera:/opera/. test (userAgent ),
Msie:/msie/. test (userAgent )&&! /Opera/. test (userAgent ),
Mozilla:/mozilla/. test (userAgent )&&! /(Compatible | webkit)/. test (userAgent)
};

Speaking of this, experienced Javascript developers already know the secrets. Yes, jQuery uses regular expressions to determine the browser type and version. Pretty well done!

First, it unified the user-agent into lower case, and then gradually matched the browser using regular expressions. For more information about regular expressions, see here. However, some may doubt whether such a judgment is correct. Let's take a look at the user-agent of the following four mainstream browsers:

Safari (Windows edition)

... AppleWebKit/523.12.9 (KHTML, like Gecko) Version/3.0 Safari/523.12.9

Opera (Opera 9.2 on Windows XP)

Opera/9.24 (Windows NT 5.1; U; zh-cn)

Mozilla (Firefox 2.0.11 on Windows XP)

... Windows NT 5.1; zh-CN; rv: 1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Internet Explorer (7.0 on Windows XP)

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

JQuery uses the different user-agent features of different browsers as its best judgment. For example, in Safari, "/webkit/" is proprietary and "/opera/" is only available in the Opera Browser. This verification method can be accurately identified by mainstream browsers.

Here, jQuery is indeed one of the excellent Javascript development frameworks. Mastering it can indeed add a lot of fun for your own development. I will post my experiences reading the jQuery framework one by one. Please pay attention to it.