React、Vue在IE的兼容问题

发布时间:2020-07-20 19:56:34 作者:可乐程序员
来源:网络 阅读:1321

Vue在IE10中无法获取父元素

原始

let parent = this.$el.parentElement

解决

这玩意还能咋解决 用原生呗 class、id都行

let parent = document.getElementsByClassName('top-chart')[0]

router-link在IE中没有作用

原始

<router-link to="a" tag="div" />

解决

if (
 '-ms-scroll-limit' in document.documentElement.style && 
 '-ms-ime-align' in document.documentElement.style
) { // detect it's IE11
 window.addEventListener("hashchange", function(event) {
 var currentPath = window.location.hash.slice(1);
 if (store.state.route.path !== currentPath) {
 router.push(currentPath)
 }
 }, false)
}
复制代码

如果还没有解决 换到方案二

<div @click="handleLink" />
handleLink () {
 this.$router.push({name:'a'})
}
复制代码

Excel表单导出异常

原始

原先通过axios的拦截器来获取响应内容的格式 然后进行下载 但在IE表现不一致 由于IE浏览器res.request.responseURL属性不存在 导致出错

const downloadUrl = url => {
 let iframe = document.createElement('iframe');
 iframe.style.display = 'none';
 iframe.src = url;
 iframe.onload = function () {
 document.body.removeChild(iframe);
 };
 document.body.appendChild(iframe);
};
// 拦截二进制响应流
if (res.headers && (res.headers['content-type'] === 'application/vnd.ms-excel;charset=UTF-8' || res.headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || res.headers['content-type'] === 'application/octet-stream;charset=UTF-8')) {
downloadUrl(res.request.responseURL);
return
}
复制代码

解决

丢弃已有的轮子 闭门造车写个原生的Ajax

utils.exportFiles = (type = 'GET', url = null) => {
 var xhr = null
 if (window.XMLHttpRequest) { // Mozilla 浏览器
 xhr = new XMLHttpRequest()
 } else {
 if (window.ActiveXObject) {
 try {
 xhr = new ActiveXObject('Microsoft.XMLHTTP')
 } catch (e) {
 try {
 xhr = new ActiveXObject('Msxml2.XMLHTTP')
 } catch (e) {
 }
 }
 }
 }
 xhr.open(type, url, true)
 xhr.responseType = 'blob'
 if (type === 'POST') {
 xhr.setRequestHeader('Content-type', 'application/json')
 }
 xhr.onload = function (res) {
 var contentDisposition = xhr.getResponseHeader('content-disposition')
 var contentType = xhr.getResponseHeader('content-type')
 var filename = contentDisposition.split(';')[2]
 // eslint-disable-next-line no-eval
 eval(filename)
 filename = decodeURI(filename)
 if (this.status === 201) {
 var blob = this.response
 if (typeof window.navigator.msSaveBlob !== 'undefined') {
 // IE 浏览器进行下载
 window.navigator.msSaveBlob(blob, filename)
 } else {
 // 非浏览器进行下载
 var downloadUrl = document.createElement('a')
 downloadUrl.download = filename
 downloadUrl.style.display = 'none'
 downloadUrl.href = URL.createObjectURL(blob)
 document.body.appendChild(downloadUrl)
 downloadUrl.click()
 URL.revokeObjectURL(downloadUrl.href)
 document.body.removeChild(downloadUrl)
 }
 } else {
 console.log('导出错误')
 }
 }
 xhr.send()
}
复制代码

React中remove()不兼容

解决

找到该节点的父节点 使用removeChild()方法删除

node.parentNode.removeChild(node)

flex在IE中子元素宽度无效

原始

问题出现在想做一个横向滚动 Apple官网有类似需求

<div class="node-list">
 <div class="node-item">
 
 </div>
</div>
复制代码

当node-item的宽度设定 且个数超过node-list的可容纳个数时 子元素的宽度失效 所有的子元素都将显示出来

解决

给父元素 即node-list动态设置宽度

<div class="node-list" v-if="nodeList">
 <div class="node-list" v-if="nodeList" :>
 </div>
</div>
复制代码

IE隐藏滚动条

解决

 overflow: scroll;
 -ms-scroll-chaining: chained;
 -ms-overflow-style: none;
 -ms-content-zooming: zoom;
 -ms-scroll-rails: none;
 -ms-content-zoom-limit-min: 100%;
 -ms-content-zoom-limit-max: 500%;
 -ms-scroll-snap-type: proximity;
 -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
 -ms-overflow-style: none;
复制代码


推荐阅读:
  1. 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
  2. 如何解决IE浏览器的兼容问题

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

web ue ct

上一篇:C语言之scanf函数

下一篇:JVM内存模型

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》