Determining Browser Type and Version with JS

Excerpted from: Wolf-Zhi Do you know how many kinds of browsers there are in the world? Besides the four well-known ones — IE, Firefox, Opera and Safari — there are nearly a hundred more browsers in the world. A few days ago a little prince was just born into the browser family: the Chrome browser released by Google. Because Chrome was born into a distinguished family, even though it is still a little guy, nobody dares to look down on it. From now on, the “four great talents” of browsers we always talk about will have to be renamed the “five golden flowers”. In website front-end development, browser compatibility issues already keep us scrambling, and Chrome’s arrival will no doubt add who knows how much more trouble. Although some WEB technologies now (AJAX, ExtJS and so on) already handle the compatibility problems between different browsers for us, sometimes solving them yourself is better, isn’t it? Browser compatibility is the first problem a front-end development framework has to solve, and to solve compatibility problems you must first accurately determine the browser’s type and version. JavaScript is the main language of front-end development, and we can judge a browser’s type and version by writing JavaScript programs. There are generally two ways for JavaScript to determine the browser type: one is to distinguish by the properties unique to each browser, and the other is to judge by analyzing the browser’s userAgent property. In many cases, after determining the browser type you still need to determine the browser version in order 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 each browser and its userAgent.

 <script type="text/javascript">
    var Sys = {};

    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 IE check first, because IE has the most users, and the Firefox check second. Judging browser types in order of how many users they have improves the efficiency of the check and avoids doing useless work. The reason we put Chrome third is that we predict Chrome will soon become the browser with the third-largest market share. Note that when analyzing the browser version we use regular expressions to extract the version information. If you are really good at JavaScript, you can also write the previous detection 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 concise. Of course, readability is a bit worse; it depends on whether you value efficiency or maintainability. The method of judging a browser by different characteristics is faster than analyzing the userAgent with regular expressions, but these characteristics may change with browser versions. For example, if a feature that was originally unique to one browser achieves success in the market, other browsers may add that feature too, so that browser’s unique characteristic disappears and our judgment fails. Therefore, the relatively safer approach is to determine the browser type by parsing the characteristics in the userAgent. Besides, judging the version information requires parsing the browser’s userAgent anyway. By analyzing the userAgent information of the various browsers, it isn’t hard to derive regular expressions that distinguish each browser and its version. What’s more, judging the browser type and judging the version can be done in one fell swoop. 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>

Here, a conditional expression of the form “… ? … : …” is used to make the code more concise. The condition is an assignment statement, which both completes the regular expression match and result copy and directly serves as the condition check. The following version information then only needs to be extracted from the previous match result, which makes for very efficient code. All the code above is preliminary research for building a front-end framework, and it passed testing in five major browsers. From now on, to determine a certain browser you only need forms like if(Sys.ie) or if(Sys.firefox), and to determine the browser version you only need forms like if(Sys.ie == ‘8.0’) or if(Sys.firefox == ‘3.0’), which is a very elegant way of expressing it. The front-end framework project has already started, so everything depends on the process and the results… The code above uses regular expressions; see Common JS Regular Expressionss