文章内容
2021/12/20 20:23:19,作 者: 黄兵
IE 浏览器兼容性相关
最近在做浏览器兼容性测试的时候，需要判断 IE 浏览器，具体示例代码如下：
/**
* detect IEEdge
* returns version of IE/Edge or false, if browser is not a Microsoft browser
*/
function detectIEEdge() {
const ua = window.navigator.userAgent;
const msie = ua.indexOf('MSIE ');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
const trident = ua.indexOf('Trident/');
if (trident > 0) {
// IE 11 => return version number
const rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
const edge = ua.indexOf('Edge/');
if (edge > 0) {
// Edge => return version number
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}
// other browser
return false;
}
window.processIE = function () {
let verifyIE = detectIEEdge()
if (verifyIE) {
const script = document.createElement('script');
script.src = "https://cdn.polyfill.io/v2/polyfill.min.js";
document.body.appendChild(script);
}
}
上面的代码如果使用的是 append() 在 IE 中也会出现错误：
document.body.append(script);
所以用了如上写法。
为了解决如下代码错误：
const url_string = window.location.href;
const url = new URL(url_string);
return url.pathname ? url.pathname : false
引入了 polyfill.min.js 文件，具体关于 URL 兼容性可以参考第 5 个参考资料地址。
由于 webpack 的问题，在 IE 中也存在问题（箭头函数的问题：SCRIPT1002: 语法错误），可以参考第 4 个参考资料链接。
修改了一个错误，之后引入千千万万个错误，真是太难了。
参考资料：
2、new URL(location.href) doesn't work in IE
3、Appending element is not working in IE11
4、Support IE 11 Using Babel and Webpack
黄兵个人博客原创。
转载请注明出处：黄兵个人博客 - IE 浏览器判断相关
评论列表