React、Vue在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">
?<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;
復制代碼