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

總結

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