最近在做一个to c的项目,需要兼容PC、移动端且要支持chrome、firfox、uc一大堆,vue3都不支持ie了然鹅产品经理说道:"虽然vue3不支持ie11及以下,但是用户在ie中打开的时候你给我跳转到一个提示页好了...",用下图来表示下心情~

The first round

要求:我们的项目只支持firefox58+、chrome76+、Safari10+

好说好说,那我就筛选出符合条件的呗,马不停蹄的敲代码and找度娘看各种浏览器内核的特性,最终写出如下代码

<script>
        // getVersion函数返回浏览器信息
        function getVersion() {
            const agent = navigator.userAgent.toLowerCase();
            let Browser = '';
            let Bversion = '';
            if (agent.indexOf('chrome') > 0) { // Chrome
                const regStrChrome = /chrome\/[\d.]+/gi;
                Browser = 'chrome';
                Bversion = '' + agent.match(regStrChrome);
            } else if (agent.indexOf('firefox') > 0) { // firefox
                const regStrFf = /firefox\/[\d.]+/gi;
                Browser = 'firefox';
                Bversion = '' + agent.match(regStrFf);
            } else if (agent.indexOf('safari') > 0 && agent.indexOf('chrome') < 0) { // Safari
                const regStrSaf = /version\/[\d.]+/gi;
                Browser = 'safari';
                Bversion = '' + agent.match(regStrSaf);
            }
            return {
                appName: Browser,
                appVer: (Bversion + '').replace(/[^0-9.]/ig, '').split('.')[0]
            };
        }
        window.onload = function() {
            const vInfo = getVersion();
            console.log('浏览器版本', vInfo);
            // 浏览器兼容版本:
            // firefox(58+)
            // safari(10+)
            // chrome(76+)
            const tooLow = !((vInfo.appName === 'chrome' && Number(vInfo.appVer) >= 76) ||
                (vInfo.appName === 'firefox' && Number(vInfo.appVer) >= 58) ||
                (vInfo.appName === 'safari' && Number(vInfo.appVer) >= 10));
            if (tooLow) {
                // 不符合条件的浏览器都展示不兼容页面
            }
        };
    </script>

The second round 

要求:你这做的不行呀,我们的用户还可能在微信里打开链接,也得让他访问,稍微等会,在手机上用uc浏览器也允许打开吧,呃呃那手机自带浏览器也允许好了。

绕这么大一圈,需求变成了除了ie其他都行哈哈。以下是ie内核的特点

// ieBrowser函数返回当前是否是ie浏览器
function ieBrowser() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    return (isIE || isIE11) ? true : false;
}

window.onload = function() {
   var isIE = ieBrowser();
   if (isIE) {
       // 不符合条件的浏览器都展示不兼容页面
   }
};

顺带附上主流浏览器的内核

浏览器内核注释
IETridentIE,猎豹安全、360极速浏览器、百度浏览器
firfoxGecko打开速度慢、更新频繁、有个猪队友叫flash并且有个神对手chrome。注定没落
SafariWebkit
chromeChromium/Blink在Chromium项目中研发Blink渲染引擎,内置于Chrome浏览器中。Blink其实是WebKit的分支。大部分国产浏览器最新版都才用Blink内核进行二次开发。
OperaBlink

Logo

前往低代码交流专区

更多推荐