Use jQuery to implement script code to detect browser and version_jquery

How to use Javascript to detect browsers seems to be a commonplace question. According to my experience, using Javascript to detect browsers is nothing more than using two major categories of methods.

One is to use the functional attributes of the browser. For example, to detect whether the browser supports the getElementById method, you can use

if (document.getElementById) {
// the method exists, so use it here
} else {
// do something else
}

Although this kind of detection cannot know which browser the user is using, it can stand the test that developers can judge whether their own code is compatible with the browser's functions. You can use this approach if you care about what the browser actually does and don't 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, users can change their user-agent, but using it does provide some useful information.

This may be a bit off topic. Friends who have used jQuery know that using jQuery's own brower method can accurately determine which browser or even version the user is using. Good development library users want to understand some of its implementation mechanisms. So, how does jQuery do this?

View the latest source code of jQuery (version 1.2.2). From line 1195 to line 1205, it is its function to determine the browser. As you can see, jQuery uses the second method above, which is to use user-agent to determine the user's browser and version.

To be honest, at first I was very surprised that just five lines of code can determine the type and version of the browser. In the book "Advanced Programming with Javascript", the author even uses a separate chapter to describe how to use Javascript to determine the browser and operating system. But by reading its code (it's actually not difficult), I suddenly had a feeling of enlightenment. Without further ado, let’s post 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)
};

At this point, experienced Javascript developers already know the secret. Yes, jQuery uses regular expressions to determine the type and version of the browser. Very beautifully done!

First, it unifies user-agent into lowercase, and then uses regular rules to gradually match which browser it is. For information on regularization, please refer here. However, some people will definitely doubt whether this judgment is correct. So let’s first 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 very cleverly uses the different user-agent characteristics of each browser as a judge. For example, "/webkit/" in Safari is exclusive, "/opera/" is also unique only to the Opera browser, and so on. This verification method can be used on current mainstream browsers and can basically be accurately judged.

Let’s stop here. jQuery is indeed one of the best Javascript development frameworks. Mastering it can indeed add a lot of fun to your own development. I will continue to post my experience of reading the jQuery framework one by one, please pay attention.