React and Vue are compatible with IE

Recent projects need to be compatible with IE. Leave important tasks on my shoulders. Turn left and right to find small problems

Vue cannot get the parent element in IE10

The original

let parent = this.$el.parentElement

To solve

Can also how to solve this thing in either native bai class, id let the parent = document. The getElementsByClassName (‘ top – chart) [0]

`router-link`It doesn’t work in IE

The original

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

To solve

Plan 1

As a result of the URLhashChangeThe browser is not responding, so we add a judgment

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) }Copy the code

If not, switch to plan two

Scheme 2

If the browser does not trigger directlyhashChangeSo let’s call it manuallyhistorytheAPI

<div @click="handleLink" />

handleLink () {
  this.$router.push({name:'a'})}Copy the code

Excel form export exception

The original

The responseURL property of Internet Explorer does not exist, causing an error

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); }; // Intercepts the binary response streamif (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
}
Copy the code

To solve

Throw away the existing wheels and write native Ajax behind closed doors

utils.exportFiles = (type = 'GET', url = null) => {
  var xhr = null
  if(window.xmlhttprequest) {// Mozilla browser 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 browser download window. The navigator. MsSaveBlob (blob, filename)}elseVar 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('Export error')
    }
  }

  xhr.send()
}
Copy the code

In the React`remove()`Are not compatible

To solve

Find the parent of the node and remove it using the removeChild() method

node.parentNode.removeChild(node)

Flex has invalid neutron element width in IE

The original

The problem is that if you want to do a horizontal scroll, there is a similar demand on the Apple website

<div class="node-list">
  <div class="node-item">
  
  </div>
</div>
Copy the code

When the width of a Node-item exceeds the maximum number of node-list items, the child element width becomes invalid and all child elements are displayed

To solve

Give the parent element namelynode-listDynamically set width

<div class="node-list" v-if="nodeList" :style="{width:`${nodeWidth}px`}">
   <div class="node-item" v-if="nodeList" >
   </div>
</div>
Copy the code

Child elements namelynode-itemSet up themin-width

<div class="node-list" v-if="nodeList" >
   <div class="node-item" v-if="nodeList" style="min-width:20px">
   </div>
</div>
Copy the code

IE hides the scroll bar

To solve

  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;
Copy the code

conclusion

If there are any new problems in the future, I will add them and welcome you to propose some different solutions and new problems for the benefit of Chetuzai

React and Vue are compatible with IE