In the development of the website front-end, browser compatibility issues have already made us rush, and I don’t know how much trouble it will cause us to be born. Browser compatibility is the first problem that the front-end development framework needs to solve. To solve the compatibility problem, you must first accurately determine the type and version of the browser.
JavaScript is the main language of front-end development. We can judge the type and version of the browser by writing JavaScript programs. There are generally two ways to judge browser types in JavaScript. One is to distinguish them based on the unique attributes of various browsers, and the other is to judge by analyzing the browser's userAgent attribute. In many cases, after the value determines the browser type, it is necessary to judge the browser version to handle the compatibility issue. The browser version can generally be known by analyzing the browser's userAgent.
Let’s first analyze the characteristics of various browsers and their userAgents.
IE
Only IE supports creating ActiveX controls, so she has something that other browsers don't have, which is the ActiveXObject function. As long as you judge that the window object has an ActiveXObject function, you can clearly determine that the current browser is IE. The typical userAgents for each version of IE are as 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
The DOM elements in Firefox have a getBoxObjectFor function, which is used to get the position and size of the DOM element (the getBoundingClientRect function corresponding to IE). This is unique to Firefox. You can tell that the current browser is Firefox. The userAgents of several versions of Firefox are roughly 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 provides a special browser logo, which is the window.opera property. Typical userAgent for Opera is 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 a number close to Opera.
Safari
There is an openDatabase function in the Safari browser that other browsers do not have, which can be used as a flag to judge Safari. Typical userAgents for Safari are 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
Its version number is a number after Version.
Chrome
Chrome has a MessageEvent function, but Firefox also has it. Fortunately, Chrome does not have Firefox's getBoxObjectFor function, and it can be accurately judged based on this condition. Currently, Chrome's 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
Among them, the version number is only after Chrome.
Interestingly, Chrome's userAgent also contains the characteristics of Safari, perhaps this is the basis for Chrome to run all Apple browser applications.
As long as we understand the above information, we can base these characteristics on the browser type and its version. We will save the judgment results in the Sys name space and become the basic logo information of the front-end framework for future programs to read. If you determine the browser, the Sys namespace will have an attribute of the browser name, and its value is the version number of the browser. For example, if IE 7.0 is determined, the value of Sys.ie is 7.0; if Firefox 3.0 is determined, the value of Sys.firefox is 3.0. Here is the code to determine the browser:
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute]
We put our judgment on IE first, because IE has the most users, followed by Firefox. Judging the browser type in the order of users can improve judgment efficiency and do less useless work. The reason why Chrome is placed in third place is because we predict that Chrome will soon become the third browser with market share. Among them, when analyzing the browser version, regular expressions are used to dissect the version information.
If your JavaScript is very good, you can also write the previous judgment code like this:
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute]
This can make JavaScript code more streamlined. Of course, the readability is a little worse, it depends on whether you value efficiency or maintainability.
The method of judging browsers using different features is faster than analyzing userAgents with regular expressions, but these features may vary with browser version. For example, if a browser's originally unique feature has achieved success in the market, other browsers may also add this feature, thus causing the browser's unique feature to disappear and causing our judgment to fail. Therefore, a relatively safe approach is to judge the browser type by analyzing the features in the userAgent. What's more, judging version information requires parsing the browser's userAgent.
By analyzing the userAgent information of various browsers, it is not difficult to obtain regular expressions that distinguish various browsers and their versions. Moreover, the judgment of browser type and version can be made in one. So, we can write the following code:
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute]
Among them, a judgment expression like "... ? ... : ..." is used to simplify the code. The judgment condition is an assignment statement that not only completes the matching of regular expressions and the copying of the result, but also directly uses the conditional judgment. The subsequent version information only needs to be extracted from the previous matching results, which is very efficient code.
The above codes are all pre-researches for creating a front-end framework and tested and passed on five major browsers. In the future, you only need to judge a certain browser in the form of if (Sys.ie) or if (Sys.firefox), and you only need to judge the browser version in the form of if (Sys.ie == '8.0') or if (Sys.firefox == '3.0'), which is still very elegant to express.
The front-end framework project has been launched, everything depends on the process and results...
The editor of Wulin.com has sorted out a few codes for you:
The code copy is as follows:
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;
The code copy is as follows:
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 is judged as IE browser
alert('//www.VeVB.COM'+Sys.ie);
if(Sys.ie=='9.0'){//Js is judged as IE 9
}else if(Sys.ie=='8.0'){//Js is judged as IE 8
}else{
}
}
if(Sys.firefox){//Js is judged as Firefox (firefox) browser
alert('//www.VeVB.COM'+Sys.firefox);
}
if(Sys.chrome){//Js is judged as Google Chrome browser
alert('//www.VeVB.COM'+Sys.chrome);
}
if(Sys.opera){//Js is judged as opera browser
alert('//www.VeVB.COM'+Sys.opera);
}
if(Sys.safari){//Js is judged as Apple safari browser
alert('//www.VeVB.COM'+Sys.safari);
}
}
Share a function method to obtain browser type and browser version number through jquery. The specific jquery code is as follows:
The code copy is as follows:
$(document).ready(function(){
varbrow=$.browser;
varbInfo="";
if(brow.msie){bInfo="Microsoft InternetExplorer"+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);
});
Starting from version 1.9, jQuery removed $.browser and $.browser.version and replaced it with the $.support method. If you need to understand $.support, please refer to:
jQuery 1.9 Use $.support instead of $.browser method