React、Vue在IE的相容問題

虛竹子發表於2019-08-29
ReactVue

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;
複製程式碼

總結

大概就是這麼多 後續如果有遇到新的問題再加進去 也歡迎大家提出一點不同的解決和新的問題 造福切圖仔

相關文章