React、Vue在IE的兼容问题

React、Vue在IE的兼容问题

近期项目需要兼容IE 重大的任务留到我的肩上 左翻翻右找找 小问题难倒英雄汉 解决了一些后抓紧写篇总结 避免各位和我一样 脑袋抓爆 头发掉一地

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" />

解决

• 方案1
  由于URL的hashChange浏览器没有响应 故我们加个判断

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)
}

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

• 方案2
  如果浏览器直接没有触发到hashChange 那么我们手动调用history的API

<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" :style="{width:`${nodeWidth}px`}">
   <div class="node-item" v-if="nodeList" >
   </div>
</div>

• 子元素 即node-item设置 min-width

<div class="node-list" v-if="nodeList" >
   <div class="node-item" v-if="nodeList" style="min-width:20px">
   </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;

总结

大概就是这么多 后续如果有遇到新的问题再加进去 也欢迎大家提出一点不同的解决和新的问题 造福切图仔