如何实现web系统检测浏览器类型的功能

缘起

有时候我们有需求是希望用户访问系统时对用户的浏览器类型进行限制，以便用户获得更好的使用体验，比如你开发的系统在chrome下兼容最为完善，你可能不希望用户使用其他的浏览器来访问你的系统。比如如下这个效果

那么这个效果是怎么做的呢？

实现思路

用户首次进入页面时，对用户的浏览器进行检测，判断如果不是你需要的浏览器，则显示对应的界面，否则正常使用。

关键代码-页面

<div class="dbw-internet-tips">
    <div class="dbw-tips-title"><img src="assets/img/nodata.png" alt=""></div>
    <div class="dbw-tips-con">为了能给您更好的体验，请使用<span class="dbw-tips-chrome">谷歌浏览器</span>查看</div>
    <div class="dbw-tips-download">没有安装谷歌浏览器？<span class="dbw-btn-download">点击下载</span></div>
</div>

关键代码-JS

$(function () {
	// 判断是否为chome，如果不是则提示使用chrome或者下载chrome
    ischrome();
    //判断浏览器是否为edge浏览器，如果是则显示提示
    getBrowser();
}

// 判断是否为chome，如果不是则提示使用chrome或者下载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;
        }
        // 判断你是否是360浏览器
        if(is360){
            nochrome();
        }
        // 是否为Edge浏览器
/*        else if(navigator.userAgent.indexOf("Microsoft Edge")) {
            nochrome();
        }*/
        else{
            yeschrome();
        }
    } 
}

// 判断浏览器是否为edge浏览器，如果是则显示提示
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();
    }
    
}

// 显示浏览器版本提示
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';
    });
}
// 隐藏浏览器版本提示
function yeschrome() {
    $('.dbw-internet-tips').hide();
}

关于下载功能

上门有下载的代码，我们只需要在对应的目录下放置要下载的文件即可

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