How to realize the function of detecting browser type in Web System

origin

Sometimes we need to restrict the type of browser when users access the system , So that users can get a better experience , For example, the system you developed is chrome The most perfect compatibility under , You may not want users to use other browsers to access your system . For example, the following effect

So how is this effect done ？

Realize the idea

When the user first enters the page , Detect the user's browser , Judge if it's not the browser you need , The corresponding interface is displayed , Otherwise, it can be used normally .

Key code - page

Log in and copy

       

        <div class="dbw-internet-tips">
        
    <div class="dbw-tips-title"><img src="assets/img/nodata.png" alt=""></div>
        
    <div class="dbw-tips-con"> In order to give you a better experience , Please use <span class="dbw-tips-chrome"> Google browser </span> see </div>
        
    <div class="dbw-tips-download"> Google browser is not installed ？<span class="dbw-btn-download"> Click to download </span></div>
        
</div>
       
       

        
1.
        
2.
        
3.
        
4.
        
5.
       

Key code -JS

Log in and copy

       

        $(function () {
        
    //  Judge whether it is chome, If not, prompt to use chrome Or download chrome
        
    ischrome();
        
    // Determine whether the browser is edge browser , If yes, the prompt 
        
    getBrowser();
        
}
        

        
//  Judge whether it is chome, If not, prompt to use chrome Or download chrome
        
function ischrome() {
        
    var isChrome = navigator.userAgent.toLowerCase();
        
    if (!isChrome.match(/chrome/)) {
        
        nochrome();
        
    } else {
        
        var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
        
        function _mime(option, value) {
        
            var mimeTypes = navigator.mimeTypes;
        
            for (var mt in mimeTypes) {
        
                if (mimeTypes[mt][option] == value) {
        
                    return true;
        
                }
        
            }
        
            return false;
        
        }
        
        //  Judge whether you are 360 browser 
        
        if(is360){
        
            nochrome();
        
        }
        
        //  Is it Edge browser 
        
/*        else if(navigator.userAgent.indexOf("Microsoft Edge")) {
        
            nochrome();
        
        }*/
        
        else{
        
            yeschrome();
        
        }
        
    } 
        
}
        

        
//  Determine whether the browser is edge browser , If yes, the prompt 
        
function getBrowser(getVersion) {
        
    var ua_str = navigator.userAgent.toLowerCase(), ie_Tridents, trident, match_str, ie_aer_rv, browser_chi_Type;
        
    if("ActiveXObject" in self){
        
        ie_aer_rv= (match_str = ua_str.match(/msie ([\d.]+)/)) ?match_str[1] :
        
            (match_str = ua_str.match(/rv:([\d.]+)/)) ?match_str[1] : 0;
        
        ie_Tridents = {"trident/7.0": 11, "trident/6.0": 10, "trident/5.0": 9, "trident/4.0": 8};
        
        trident = (match_str = ua_str.match(/(trident\/[\d.]+|edge\/[\d.]+)/)) ?match_str[1] : undefined;
        
        browser_chi_Type = (ie_Tridents[trident] || ie_aer_rv) > 0 ? "ie" : undefined;
        
    }else{
        
        browser_chi_Type = (match_str = ua_str.match(/edge\/([\d.]+)/)) ? "edge" :
        
            (match_str = ua_str.match(/firefox\/([\d.]+)/)) ? "firefox" :
        
                (match_str = ua_str.match(/chrome\/([\d.]+)/)) ? "chrome" :
        
                    (match_str = ua_str.match(/opera.([\d.]+)/)) ? "opera" :
        
                        (match_str = ua_str.match(/version\/([\d.]+).*safari/)) ? "safari" : undefined;
        
    }
        

        
    var verNum, verStr;
        
    verNum = trident && ie_Tridents[trident] ? ie_Tridents[trident] : match_str[1];
        

        
    verStr = (getVersion != undefined) ? browser_chi_Type+"/"+verNum : browser_chi_Type;
        
    console.log(verStr);
        
    if(verStr == 'edge') {
        
        nochrome();
        
    }
        

        
}
        

        
//  Show browser version prompt 
        
function nochrome() {
        
    var bodys = $('body');
        
    bodys.find('.dbw-login-container').remove();
        
    bodys.css('background','none');
        
    $('.dbw-internet-tips').show();
        
    $('.dbw-btn-download').click(function() {
        
        location.href='root/googlechromexp_49.0.2623.112.exe';
        
    });
        
}
        
//  Hide browser version tips 
        
function yeschrome() {
        
    $('.dbw-internet-tips').hide();
        
}
       
       

        
1.
        
2.
        
3.
        
4.
        
5.
        
6.
        
7.
        
8.
        
9.
        
10.
        
11.
        
12.
        
13.
        
14.
        
15.
        
16.
        
17.
        
18.
        
19.
        
20.
        
21.
        
22.
        
23.
        
24.
        
25.
        
26.
        
27.
        
28.
        
29.
        
30.
        
31.
        
32.
        
33.
        
34.
        
35.
        
36.
        
37.
        
38.
        
39.
        
40.
        
41.
        
42.
        
43.
        
44.
        
45.
        
46.
        
47.
        
48.
        
49.
        
50.
        
51.
        
52.
        
53.
        
54.
        
55.
        
56.
        
57.
        
58.
        
59.
        
60.
        
61.
        
62.
        
63.
        
64.
        
65.
        
66.
        
67.
        
68.
        
69.
        
70.
        
71.
        
72.
        
73.
        
74.
        
75.
        
76.
        
77.
        
78.
        
79.
       

About download function

There is a downloaded code on the door , We just need to place the files to be downloaded in the corresponding directory

Log in and copy

       

        location.href='root/googlechromexp_49.0.2623.112.exe';
       
       

        
1.