【JQuery】JQuery + Layer 实现简单的浏览器版本判断弹窗提示

效果图

代码

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
<style>
/* 浏览器版本过低弹窗提示层 */
.unsupport-tip {
    background: linear-gradient(to bottom right, #33C4FB , #33ACDB);
    border-radius:25px;
    border:1px solid #0C8ABB;
    box-shadow:2px 2px 2px #0E93C6;
    color:#FFF;
    text-align:center;
    font-weight:bold;
    vertical-align:middle;
}
    .unsupport-tip span {
        vertical-align:middle;
        display: inline-block;
        font-size:20px;
        line-height:20px;
        margin:48px auto;
    }
</style>

<div><div>

<script>
//获取浏览器类型与版本。IE 11 & Chrome 7 以下弹窗提示用户升级
function GetBrowserVersion() {
    /* chrome */
    //Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
    /* firefox */
    //Mozilla/5.0 (Windows NT 6.1; rv:66.0) Gecko/20100101 Firefox/66.0
    /* IE 8 */
    //Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
    /* IE 10 */
    //Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
    /* IE 11 */
    //Mozilla/5.0 (Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
    var userAgent = navigator.userAgent.toLocaleLowerCase();
    /* 测试用例 模拟 Chrome 5 版本 */
    //userAgent = "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3770.142 Safari/537.36";
    var msie = /(msie) ([\d\.]+)/i, chrome = /(chrome)\/([\d\.]+)/i, firefox = /(firefox)\/([\d\.]+)/i, ie11 = /(trident).*?rv:([\d\.]+)/i;
    var type = userAgent.match(msie) || userAgent.match(chrome) || userAgent.match(ie11) || userAgent.match(firefox);
    return {
        browser: type[1],
        version: type[2],
    }
}

//IE 11 & Chrome 7 以下弹窗提示用户升级
(function showBoxIfBrowserUnSupport() {
    var browser = GetBrowserVersion();
    if (browser && ((
            browser.browser.toLocaleLowerCase() == 'chrome' && browser.version && parseInt(browser.version.split('.')[0]) < 60)
        || (browser.browser.toLocaleLowerCase() == 'msie' && browser.version && parseInt(browser.version.split('.')[0]) < 11)
        || (browser.browser.toLocaleLowerCase() == 'ie11' && browser.version && parseInt(browser.version.split('.')[0]) < 11)
        )) {
        var msgHtml = '<span style=\'font-size:20px\'>系统检测到您使用的浏览器版本过低，建议您下载最新版浏览器体验！ </span> \
                       <span style=\'font-size:20px\'> 当前浏览器版本：（' + browser.browser + ':' + browser.version + '）</span>  \
                       <span style=\'font-size:20px\'> 建议浏览器版本：Chrome 60 以上 或 IE 11 </span>';
        layer.msg('', {
            id: 'unsupport-tip',
            content: msgHtml,
            area: ['800px', '400px'],
            //offset :'auto',
            skin: 'unsupport-tip',
            shade: [0.2, '#393D49'],
            shadeClose: false,
            time: 0,
            anim: 0
        });
    }
})();
</script>