当vue3不再支持IE
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。Object.assign()
·
最近在做一个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) {
// 不符合条件的浏览器都展示不兼容页面
}
};
顺带附上主流浏览器的内核
浏览器 | 内核 | 注释 |
IE | Trident | IE,猎豹安全、360极速浏览器、百度浏览器 |
firfox | Gecko | 打开速度慢、更新频繁、有个猪队友叫flash并且有个神对手chrome。注定没落 |
Safari | Webkit | |
chrome | Chromium/Blink | 在Chromium项目中研发Blink渲染引擎,内置于Chrome浏览器中。Blink其实是WebKit的分支。大部分国产浏览器最新版都才用Blink内核进行二次开发。 |
Opera | Blink |
更多推荐
已为社区贡献7条内容
所有评论(0)