javascript检测浏览器是否需要升级版本和提示

最新推荐文章于 2024-05-16 14:32:51 发布

追逐梦想之路_随笔

最新推荐文章于 2024-05-16 14:32:51 发布

阅读量1.8k

点赞数 1

分类专栏： javaScript实战篇文章标签： javascript

本文链接：https://blog.csdn.net/qq_44472790/article/details/128525708

版权

javaScript实战篇专栏收录该内容

49 篇文章 1 订阅

订阅专栏

以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.网页要求最低浏览器版本要求

// 比如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.案例网页应用
需求：对于浏览器低于以上最低版本要求的浏览器加以提示升级浏览器说明

   const {isUpdate,browser,versions,lowestVersions=''} = isUpgradeBrowser()
     if (isUpdate) {
         alert(`您当前${browser}浏览器版本过低(版本${versions}),建议访问网页不低于${lowestVersions}版本,如果出现不能访问页面情况,请您升级浏览器版本在尝试!`)
     }