以vue3+elementPlus為例,可能涉及低版本瀏覽器的檢測和提示

1.獲取瀏覽器版本Func

function getBrowserVersion(browserType, UserAgent) {let versions = '';switch (browserType) {case 'IE':versions = UserAgent.match(/(msie\s|trident.*rv:)([\w.]+)/)[2];break;case 'Chrome':for (let mt in navigator.mimeTypes) {//360 pc if (navigator.mimeTypes[mt]['type'] == 'application/360softmgrplugin') {browserType = '360';}}versions = UserAgent.match(/chrome\/([\d.]+)/)[1];break;case 'Firefox':versions = UserAgent.match(/firefox\/([\d.]+)/)[1];break;case 'Opera':versions = UserAgent.match(/opera\/([\d.]+)/)[1];break;case 'Safari':versions = UserAgent.match(/version\/([\d.]+)/)[1];break;case 'Edge':versions = UserAgent.match(/edge\/([\d.]+)/)[1];break;case 'QQBrowser':versions = UserAgent.match(/qqbrowser\/([\d.]+)/)[1];break;}return parseInt(versions);}

2.獲取當前瀏覽器類型Func

function getBrowser() {const UserAgent = navigator.userAgent.toLowerCase();const browserInfo = {};const browserObj = {IE: window.ActiveXObject || "ActiveXObject" in window,Chrome: UserAgent.indexOf('chrome') > -1 && UserAgent.indexOf('safari') > -1,Firefox: UserAgent.indexOf('firefox') > -1,Opera: UserAgent.indexOf('opera') > -1,Safari: UserAgent.indexOf('safari') > -1 && UserAgent.indexOf('chrome') == -1,Edge: UserAgent.indexOf('edge') > -1,QQBrowser: /qqbrowser/.test(UserAgent),WeixinBrowser: /MicroMessenger/i.test(UserAgent)};for (let key in browserObj) {if (browserObj.hasOwnProperty(key) && browserObj[key]) {browserInfo.browser = key;browserInfo.versions = getBrowserVersion(key, UserAgent);break}}return browserInfo;}

3.網(wǎng)頁要求最低瀏覽器版本要求

// 比如vue3+elementPlus要求瀏覽器最低版本要求 Edge ≥ 79 Firefox ≥ 78 Chrome ≥ 64 Safari ≥ 12 const browserList = [{browser: 'Edge',versions: 79},{browser: 'Firefox',versions: 78},{browser: 'Chrome',versions: 64},{browser: 'Safari',versions: 12}]

4.判斷是否需要升級瀏覽器版本Func

function isUpgradeBrowser() {const { browser, versions } = getBrowser()for (const objKey of browserList) {if (objKey.browser === browser && versions < objKey.versions) {// 需要升級return {browser,versions,lowestVersions: objKey.versions,isUpdate: true}}}// 默認不需要升級return {browser,versions,isUpdate: false}}

5.案例網(wǎng)頁應用
需求：對于瀏覽器低于以上最低版本要求的瀏覽器加以提示升級瀏覽器說明

const {isUpdate,browser,versions,lowestVersions=''} = isUpgradeBrowser()if (isUpdate) {alert(`您當前${browser}瀏覽器版本過低(版本${versions}),建議訪問網(wǎng)頁不低于${lowestVersions}版本,如果出現(xiàn)不能訪問頁面情況,請您升級瀏覽器版本在嘗試!`)}

總結(jié)

以上是生活随笔為你收集整理的javascript检测浏览器是否需要升级版本和提示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。