判斷瀏覽器版本並且對使用低版本瀏覽器的使用者進行提示

需求

提醒使用者的提示條可關閉，關閉後再瀏覽網站其他頁面不再顯示。關閉所有網站頁面或瀏覽器後再次瀏覽網站，再次跳出提示。

獲取瀏覽器版本

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();
    }
}
複製程式碼