http://www.cnblogs.com/carekee/articles/1854674.htm
In the front-end development site, the browser compatibility issues already let us rush, Chrome birth do not know how much trouble we have to give Tim. Browser compatibility is the first front-end development framework to solve problems, to solve the compatibility problem must first accurately determine the browser type and version. JavaScript is the primary language front-end development, we can determine the type and version of the browser by writing JavaScript programs. JavaScript determines the type of browser There are two general approaches, one is resolved according to the unique properties of the various browsers, and the other is through the analysis of the property browser userAgent judged. After many instances, determine the value of your browser type, browser version in order to determine the need to deal with compatibility issues, and determine the version of the browser generally only know through the analysis userAgent to the browser. We first analyze the characteristics of a variety of browsers and userAgent.
IE
Only IE supports the creation of ActiveX controls, so she does not have a browser other thing that is ActiveXObject function. As long as the object exists ActiveXObject window function is determined, it can be clearly judged that the current browser is IE. And typical versions IE userAgent follows:
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)
Among them, the version number is the number after MSIE.
Firefox
In Firefox getBoxObjectFor DOM element has a function to acquire the position and size of the DOM element (IE corresponding function is getBoundingClientRect). This is unique to Firefox, you can judge it knows the current browser is Firefox. Several versions of Firefox userAgent as follows:
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
Among them, the version number is the number after Firefox.
Opera
Opera browser offers a special mark, is window.opera property. Opera typical userAgent as follows:
Opera / 9.27 (Windows NT 5.2; U; zh-cn)
Opera / 8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla / 5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0
Among them, the version number is close to the Opera figures.
Safari
Safari browser, there is one other browsers do not have openDatabase function can be used as a sign of judgment Safari. Typical Safari userAgent 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
Its version number is the number after Version.
Chrome
Chrome has a MessageEvent function, but also Firefox. But at least there is no Chrome and Firefox, getBoxObjectFor function, according to this condition still can accurately judge the Chrome browser. Currently, Chrome is the userAgent:
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
Among them, the digital version of the Chrome only.
Interestingly, the userAgent Chrome also includes features of Safari, Chrome and perhaps this is the basis for all Apple can run a browser application bar.
Once you know this information, we can determine the foundation of these features to the browser type and version. We will judge the results stored in the Sys namespace, as the basic symbol of the front-end framework for future program to read. If it is determined to seek out species of browser, Sys namespace will have a property that browser name, version number value of the browser. For example, if it is judged IEs 7.0, the value 7.0 Sys.ie; if judged Firefox 3.0, the value 3.0 Sys.firefox. The following code is to determine the browser:
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
else if (document.getBoxObjectFor)
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
else if (window.MessageEvent && !document.getBoxObjectFor)
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/)[1]
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/)[1];
//以下进行测试
if(Sys.ie) document.write('IE: '+Sys.ie);
if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
if(Sys.opera) document.write('Opera: '+Sys.opera);
if(Sys.safari) document.write('Safari: '+Sys.safari);
</script>
We placed the first judgment of the IE, because IE users most, followed by the judge Firefox. According to the user to determine how much of the order browser type, can improve the efficiency of judgment, less overhead. The reason why the Chrome in the third judge, because we predict that Chrome will soon become the third market share of the browser. Among them, in the analysis of browser version, it uses regular expressions to extract release the information.
If you play a high of JavaScript, you can also previous judgment code written like this:
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
window.ActiveXObject ? Sys.ie = ua.match(/msie ([\d.]+)/)[1] :
document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] :
window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] :
window.opera ? Sys.opera = ua.match(/opera.([\d.]+)/)[1] :
window.openDatabase ? Sys.safari = ua.match(/version\/([\d.]+)/)[1] : 0;
//以下进行测试
if(Sys.ie) document.write('IE: '+Sys.ie);
if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
if(Sys.opera) document.write('Opera: '+Sys.opera);
if(Sys.safari) document.write('Safari: '+Sys.safari);
</script>
This allows JavaScript code more streamlined more. Of course, readability somewhat less certain, you will see is the emphasis on efficiency or maintainability of importance.
Use a different browser features to determine the method, userAgent to come faster than the speed though a regular expression analysis, but these features may vary depending on the browser version. For example, one of the browsers had the unique characteristics of success on the market, other browsers will likely follow to add that feature, so that the unique features of the browser disappear, resulting in our judgment failed. Thus, relatively safer approach is to determine the browser type by analyzing the characteristics of userAgent. Moreover, anyway, to determine the version information is also needed to resolve the userAgent browser.
UserAgent information by analyzing various types of browsers, not difficult to come to distinguish various types of browser and its version of regular expressions. Further, determination of the type of browser version and judgment can be integrally bonded manner. So, we can write the following code:
<script type="text/javascript">
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) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);
</script>
Among them, the use of the "... ...:? ..." This judgment expressions to streamline the code. Judgment that an assignment statement, both complete regular expression matching and the results of copying, but also directly as a condition to judge. Subsequent version information is extracted only from the front to the matching result, which is very efficient code.
The above code is to build a front-end frame made of pre-research, and in the top five browser test. In the future, the browser is determined only with a certain if (Sys.ie) or if (Sys.firefox) and other forms, and is determined only by the browser version if (Sys.ie == '8.0'), or if (Sys. firefox == '3.0') and other forms of expression it is still very elegant.
Method Two:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <script type="text/javascript"> function browserinfo(){ var Browser_Name=navigator.appName; var Browser_Version=parseFloat(navigator.appVersion); var Browser_Agent=navigator.userAgent; var Actual_Version,Actual_Name; =is_IEvar(Of BROWSER_NAME == " in the Microsoft Internet Explorer " ); // interpretation whether ie browser var is_NN = (of BROWSER_NAME == " Netscape " ); // determine whether netscape browser var is_op = (of BROWSER_NAME == " Opera " ) ; // determines whether Opera browser iF (is_NN) { // Upper need to BE Process 5.0, 5.0 Lower return Directly iF (BROWSER_VERSION > = 5.0 ) { iF (Browser_Agent.indexOf ( "Netscape")!=-1){ var Split_Sign=Browser_Agent.lastIndexOf("/"); var Version=Browser_Agent.lastIndexOf(" "); var Bname=Browser_Agent.substring(0,Split_Sign); var Split_sign2=Bname.lastIndexOf(" "); Actual_Version=Browser_Agent.substring(Split_Sign+1,Browser_Agent.length); Actual_Name=Bname.substring(Split_sign2+1,Bname.length); } if(Browser_Agent.indexOf("Firefox")!=-1){ var Split_Sign=Browser_Agent.lastIndexOf("/"); var Version=Browser_Agent.lastIndexOf(" "); Actual_Version=Browser_Agent.substring(Split_Sign+1,Browser_Agent.length); Actual_Name=Browser_Agent.substring(Version+1,Split_Sign); } if(Browser_Agent.indexOf("Safari")!=-1){ if(Browser_Agent.indexOf("Chrome")!=-1){ var Split_Sign=Browser_Agent.lastIndexOf(" "); var Version=Browser_Agent.substring(0,Split_Sign);; var Split_Sign2=Version.lastIndexOf("/"); var Bname=Version.lastIndexOf(" "); Actual_Version=Version.substring(Split_Sign2+1,Version.length); Actual_Name=Version.substring(Bname+1,Split_Sign2); } else{ var Split_Sign=Browser_Agent.lastIndexOf("/"); var Version=Browser_Agent.substring(0,Split_Sign);; var Split_Sign2=Version.lastIndexOf("/"); var Bname=Browser_Agent.lastIndexOf(" "); Actual_Version=Browser_Agent.substring(Split_Sign2+1,Bname); Actual_Name=Browser_Agent.substring(Bname+1,Split_Sign); } } } else{ Actual_Version=Browser_Version; Actual_Name=Browser_Name; } } else if(is_IE){ var Version_Start=Browser_Agent.indexOf("MSIE"); var Version_End=Browser_Agent.indexOf(";",Version_Start);
Actual_Version=Browser_Agent.substring(Version_Start+5,Version_End) Actual_Name=Browser_Name;
if(Browser_Agent.indexOf("Maxthon")!=-1||Browser_Agent.indexOf("MAXTHON")!=-1){ var mv=Browser_Agent.lastIndexOf(" "); var mv1=Browser_Agent.substring(mv,Browser_Agent.length-1); mv1="遨游版本:"+mv1; Actual_Name+="(Maxthon)"; Actual_Version+=mv1; } } else if(Browser_Agent.indexOf("Opera")!=-1){ Actual_Name="Opera"; var tempstart=Browser_Agent.indexOf("Opera"); var tempend=Browser_Agent.length; Actual_Version=Browser_Version; } else{ Actual_Name="Unknown Navigator" Actual_Version="Unknown Version" } /*------------------------------------------------------------------------------ --Your Can Create new properties of navigator(Acutal_Name and Actual_Version) -- --Userage: -- --1,Call This Function. -- --2,use the property Like This:navigator.Actual_Name/navigator.Actual_Version;-- ------------------------------------------------------------------------------*/ navigator.Actual_Name=Actual_Name; navigator.Actual_Version=Actual_Version; /*--------------------------------------------------------------------------- --Or Made this a Class. -- --Userage: -- --1,Create a instance of this object like this:var browser=new browserinfo;-- --2,user this instance:browser.Version/browser.Name; -- ---------------------------------------------------------------------------*/ this.Name=Actual_Name; this.Version=Actual_Version; } Browserinfo (); document.write ( " you are using a browser that is: " + navigator.userAgent); document.write ( " <br> " ); document.write ( " you are using a browser that is: " + Navigator. Actual_Name + " , the version number: " + navigator.Actual_Version); </ Script > < head > < Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = GB2312" /> < title >Untitled Document </ title > </head> <body> </body> </html>
Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/02/26/2932935.html