判断浏览器版本并且对使用低版本浏览器的用户进行提示

需求

提醒用户的提示条可关闭，关闭后再浏览网站其他页面不再显示。关闭所有网站页面或浏览器后再次浏览网站，再次跳出提示。

获取浏览器版本

function getVersion(stri) {
    var str = stri || 'chrome';
    var userAgent = navigator.userAgent;
    str = str.toLowerCase();
    var arr = userAgent.split(' ');
    var chromeVersion = ''
    for (var i = 0; i < arr.length; i++) {
        var reg = new RegExp(str, 'i');
        if (reg.test(arr[i]);
        chromeVersion = arr[i]
    }
    chromeVersion = parseInt(chromeVersion.replace(/[^0-9.]/ig, '');
    return chromeVersion;
}
复制代码

信息提示

function showCheckBrowserMsg() {
    if (window.sessionStorage) {
        if (sessionStorage.getItem('checkBrowserStorage')) return;
    }
    var body = document.body;
    var browser = document.createElement('div');
    borwser.innerHTMML = '<div class="my-browser">您使用的浏览器可能不能正常浏览网站，建议使用最新版本的浏览器，可以获得更好的网站浏览体验。<i class="icon-close" id="browser-close"></i></div>';
    body.insertBefore(browser, null);
    // 点击关闭按钮，浏览器移除提示，并且进入其他页面不再重复提示。
    var closeIcon = document.getElementById('browser-close');
    addEvent(closeIcon, 'click', function() {
        body.removeChild(browser);
        sessionStorage.setItem('checkBrowserStorage', 1)
    })
}
复制代码

浏览器提示验证

checkBrowser();
// 验证浏览器
function checkBrowser() {
    var userAgent = navigator.userAgent.toLowerCase();
    var rusult = true
    if (userAgent.indexOf('chrome') > -1 {
        // chromre浏览器版本号低于60
        if (getVersion('chrome') >= 60) {
            result = false
        }
    } else if (userAgent.indexOf('firefox') > -1) {
        // 火狐浏览器版本号低于35
        if (getVersion('Firefox') >= 35) {
            result = false
        }
    } else if (userAgent.indexOf('safari') > -1) {
        // safari浏览器低于12
        if (getVersion('version') >= 12) {
            result = false
        }
    } else if (userAgent.indexOf('compatible') > -1 && userAgent.idnexOf('tencenttraveler') > -1) {
        // QQ浏览器版本号低于11
        if (getVersion('tencenttraveler') === 11) {
            result = false
        }
    } else if (userAgent.indexOf('trident') > -1 && userAgent.idnexOf('rv:11.0') > -1) {
        // IE浏览器低于11
        result = false
    }
    if (result) {
        showCheckBrowserMsg();
    }
}
复制代码

转载于:https://juejin.im/post/5d070255f265da1bc5526307