Js determines the browser type the version of the code of the attached multiple instance code

Browser compatibility issues were already causing us a lot of confusion in front of the web, and the arrival of Chrome is going to add to that. Browser compatibility is the first problem to be solved by the front-end development framework.

JavaScript is the main front-end development language, we can write JavaScript programs to determine the type and version of the browser. There are generally two ways for JavaScript to determine the type of browser, one is by the attributes that are unique to various browsers, and the other is by analyzing the browser's userAgent properties. In many cases, once the values have determined the browser type, a browser version needs to be determined to address the compatibility issue, which is generally only known by analyzing the browser's userAgent.

Let's first examine the characteristics of the various browsers and their useragents.

IE

Mozilla / 4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla / 4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla / 4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla / 4.0 (compatible; MSIE 5.0; Windows NT)

The version number is the number after MSIE.

Firefox

Each DOM element in Firefox has a getBoxObjectFor function that gets the location and size of that DOM element (the getBoundingClientRect function for IE). This is unique to Firefox, and it will tell you that the current browser is Firefox. The userAgent for several versions of Firefox looks like this:

Mozilla / 5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla / 5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla / 5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12
The version number is the number after Firefox.

The Opera

Opera provides a special browser flag, the window.opera property. Opera's typical userAgent is as follows:

Opera / 9.27 (Windows NT 5.2; U; Useful - cn)
Opera / 8.0 (Macintosh; PPC, Mac OS X; U; En)
Mozilla / 5.0 (Macintosh; PPC, Mac OS X; U; En) Opera 8.0

Where the version number is a number close to Opera.

Safari

There is an openDatabase function in Safari that no other browser has that can be used as a marker for judging Safari. The typical userAgent in Safari is as follows:

Mozilla / 5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla / 5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

The Version number is a number after Version.

Chrome

Chrome has a MessageEvent function, but so does Firefox. However, fortunately, Chrome doesn't have Firefox's getBoxObjectFor function, which is a good way to figure out Chrome's browser. Currently, the Chrome userAgent is:

Mozilla / 5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

The version number is only the number after Chrome.

Interestingly, Chrome's userAgent also includes Safari features, which may be the basis for Chrome to run all Apple browser apps.

With this information in mind, we can determine the browser type and version based on these features. The results of our judgments are stored in the Sys namespace and become the basic flags of the front-end framework for future programs to read. If a browser is identified, the Sys namespace will have a property of the browser name with a value of the browser version number. For example, if IE 7.0 is determined, the value of sys. IE is 7.0; If Firefox 3.0 is determined, sys. Firefox has a value of 3.0. Here is the code to judge the browser:

[Ctrl+A]

We put IE first because it has the most users, followed by Firefox. Judging the browser type by the number of users in the order in which it is used can improve judgment efficiency and reduce waste. We put Chrome in third place because we predict it will soon be the third browser by market share. Among them, when analyzing the browser version, the regular expression is used to extract the version information.

If your JavaScript is really high, you can also write the judgment code like this:

[Ctrl+A]

This makes your JavaScript code a little more streamlined. Of course, readability is a bit less, depending on whether you value efficiency or maintainability.

Using different features to judge the browser, although faster than using regular expressions to analyze the userAgent, these features may vary with the browser version. For example, if a browser's unique feature becomes a success in the market, other browsers may join in, making the browser's unique feature disappear and causing our judgment to fail. Therefore, it is relatively safe to determine the browser type by resolving the characteristics in the userAgent. Besides, judging version information requires parsing the browser's userAgent anyway.

By analyzing the userAgent information of various browsers, it is not difficult to get regular expressions to distinguish between different browsers and their versions. In addition, the browser type and version of the judgment can be fully integrated. So, we can write the following code:

[Ctrl+A]

Among them, the use of "... ? . :..." Such judgment expressions simplify the code. The judgment condition is an assignment statement, which not only completes the regular expression match and the result copy, but also serves as the conditional judgment directly. The subsequent version information is simply extracted from the previous match, which is very efficient code.

The above code is to build a front-end framework to do the research, and in the five browser tests passed. In the future, it will be very elegant to judge a browser only in the form of if(sys.ie) or if(sys.firefox), and the browser version only in the form of if(sys.ie == '8.0') or if(sys.firefox == '3.0').

The front-end framework project has been started, it's all about the process and the results...

var Browser=new Object();
Browser.isMozilla=(typeof document.implementation!='undefined')&&(typeof document.implementation.createDocument!='undefined')&&(typeof HTMLDocument!='undefined');
Browser.isIE=window.ActiveXObject ? true : false;
Browser.isFirefox=(navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
Browser.isSafari=(navigator.userAgent.toLowerCase().indexOf("safari")!=-1);
Browser.isOpera=(navigator.userAgent.toLowerCase().indexOf("opera")!=-1);
function check(){
 alert(Browser.isIE?'ie':'not ie');
 alert(Browser.isFirefox?'Firefox':'not Firefox');
 alert(Browser.isSafari?'Safari':'not Safari');
 alert(Browser.isOpera?'Opera':'not Opera');
}
window.onload=check;

function isBrowser(){
 var Sys={};
 var ua=navigator.userAgent.toLowerCase();
 var s;
 (s=ua.match(/msie ([d.]+)/))?Sys.ie=s[1]:
 (s=ua.match(/firefox/([d.]+)/))?Sys.firefox=s[1]:
 (s=ua.match(/chrome/([d.]+)/))?Sys.chrome=s[1]:
 (s=ua.match(/opera.([d.]+)/))?Sys.opera=s[1]:
 (s=ua.match(/version/([d.]+).*safari/))?Sys.safari=s[1]:0;
 if(Sys.ie){//Js for Internet explorer
  alert('//www.jb51.net'+Sys.ie);
  if(Sys.ie=='9.0'){//Js is IE 9
  }else if(Sys.ie=='8.0'){//Js is IE 8
  }else{
  }
 }
 if(Sys.firefox){//Js is the firefox browser
  alert('//www.jb51.net'+Sys.firefox);
 }
 if(Sys.chrome){//Js is Google chrome browser
  alert('//www.jb51.net'+Sys.chrome);
 }
 if(Sys.opera){//Js is the opera browser
  alert('//www.jb51.net'+Sys.opera);
 }
 if(Sys.safari){//Js for apple's safari browser
  alert('//www.jb51.net'+Sys.safari);
 }
}

Share a functional method to get the browser type and browser version number through jquery. The specific jquery code is as follows:

$(document).ready(function(){
 varbrow=$.browser;
 varbInfo="";
 if(brow.msie){bInfo="MicrosoftInternetExplorer"+brow.version;}
 if(brow.mozilla){bInfo="MozillaFirefox"+brow.version;}
 if(brow.safari){bInfo="AppleSafari"+brow.version;}
 if(brow.opera){bInfo="Opera"+brow.version;}
 alert(bInfo);
});

JQuery  Starting with version 1.9, remove $. Browser and $. Browser. Version and replace them with the $. Support method.

(link: #)