A few days ago, a little prince was born in the browser family, the Chrome browser launched by Google. Since Chrome was born into a famous family, even though he was still a little guy, no one dared to look down on him. From now on, we often say that the "Four Talents" of browsers have to be renamed the "Five Golden Flowers".
In website front-end development, browser compatibility issues have already made us in a hurry, and the birth of Chrome will cause us more troubles. Browser compatibility is the first problem to be solved by the front-end development framework. To solve the compatibility problem, you must first accurately determine the browser type and its version.
JavaScript is the main language for front-end development. We can determine the type and version of the browser by writing JavaScript programs. There are generally two methods for JavaScript to determine the browser type. One is based on the unique attributes of various browsers, and the other is determined by analyzing the userAgent attribute of the browser. In many cases, after the browser type is determined by value, the browser version needs to be determined to handle compatibility issues, and the browser version can generally only be known by analyzing the browser's userAgent.
Let's first analyze the characteristics of various browsers and their userAgent.
IE
Only IE supports the creation of ActiveX controls, so it has something that other browsers do not have, which is the ActiveXObject function. As long as it is determined that the ActiveXObject function exists in the window object, it can be clearly determined that the current browser is IE. The typical userAgent for each version of IE is as follows:
<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 put the judgment on IE first because IE has the most users, followed by Firefox. Determining browser types in order of number of users can improve the efficiency of judgment and reduce wasted effort. The reason why Chrome is ranked third is because we predict that Chrome will soon become the third browser in terms of market share. Among them, when analyzing the browser version, regular expressions are used to extract the version information.
If you are good at JavaScript, you can also write the previous judgment code 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 can make the JavaScript code more streamlined. Of course, the readability is slightly worse, depending on whether you value efficiency or maintainability.
Using different characteristics to determine the browser is faster than using regular expressions to analyze userAgent, but these characteristics may change with browser versions. For example, if a browser's original unique feature achieves market success, other browsers may follow suit and add this feature, causing the browser's unique feature to disappear and causing our judgment to fail. Therefore, a relatively safe approach is to determine the browser type by parsing the characteristics in userAgent. What's more, anyway, judging the version information also requires parsing the browser's userAgent.
By analyzing the userAgent information of various browsers, it is not difficult to find the regular expressions that distinguish various browsers and their versions. Moreover, the judgment of browser type and version can be completely integrated. 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, judgment expressions such as "...? ...: ..." are used to simplify the code. The judgment condition is an assignment statement, which not only completes the matching of regular expressions and copy the results, but also directly serves as a conditional judgment. The subsequent version information only needs to be extracted from the previous matching results. This is very efficient code.
The above codes are all pre-research done to build the front-end framework, and have been tested on the five major browsers. From now on, you only need to use if(Sys.ie) or if(Sys.firefox) to judge a certain browser, and you only need to use if(Sys.ie == '8.0') or if(Sys. firefox == '3.0') and other forms are still very elegant to express.
The front-end framework project has been started, everything depends on the process and results...
Original: Li Zhan (leadzen) Ali Software 2008-9-6 Hangzhou
In order to make everyone have more fun, the editor of Script House has compiled a few:
<script language="JavaScript">
function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE"; //ie浏览器
}
if(isChrome=navigator.userAgent.indexOf("Chrome")>0){
return "chrome"; //Chrome浏览器
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox"; //Firefox浏览器
}
if(isOpera=navigator.userAgent.indexOf("Opera")>0) {
return "Opera"; //Opera浏览器
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari"; //Safari浏览器
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino"; //Camino浏览器
//……增加一些其它代码……
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko";
}
}
alert(navigator.userAgent);
alert("您的浏览器类型为:"+getOs());
</script>Relatively complete judgment code
<script type="text/javascript">
document.write('浏览器判別：');
var OsObject=navigator.userAgent;
// 包含「Opera」文字列
if(OsObject.indexOf("Opera") != -1)
{
document.write('您的浏览器是Opera吧？');
}
// 包含「MSIE」文字列
else if(OsObject.indexOf("MSIE") != -1)
{
document.write('您的浏览器是Internet Explorer吧？');
}
// 包含「chrome」文字列 ，不过360浏览器也照抄chrome的UA
else if(OsObject.indexOf("Chrome") != -1)
{
document.write('您的浏览器是chrome或360浏览器吧？');
}
// 包含「UCBrowser」文字列
else if(OsObject.indexOf("UCBrowser") != -1)
{
document.write('您的浏览器是UCBrowser吧？');
}
// 包含「BIDUBrowser」文字列
else if(OsObject.indexOf("BIDUBrowser") != -1)
{
document.write('您的浏览器是百度浏览器吧？');
}
// 包含「Firefox」文字列
else if(OsObject.indexOf("Firefox") != -1)
{
document.write('您的浏览器是Firefox吧？');
}
// 包含「Netscape」文字列
else if(OsObject.indexOf("Netscape") != -1)
{
document.write('您的浏览器是Netscape吧？');
}
// 包含「Safari」文字列
else if(OsObject.indexOf("Safari") != -1)
{
document.write('您的浏览器是Safari 吧？');
}
else{
document.write('无法识别的浏览器。');
}
</script> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
