React、Vue在IE的兼容問題（react 兼容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瀏覽器沒有響應(yīng) 故我們加個(gè)判斷
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)}復(fù)制代碼
如果還沒有解決 換到方案二
- 方案2
- 如果瀏覽器直接沒有觸發(fā)到hashChange 那么我們手動(dòng)調(diào)用history的API
<div @click=”handleLink” />handleLink () { this.$router.push({name:’a’})}復(fù)制代碼
Excel表單導(dǎo)出異常
原始
原先通過axios的攔截器來獲取響應(yīng)內(nèi)容的格式 然后進(jìn)行下載 但在IE表現(xiàn)不一致 由于IE瀏覽器res.request.responseURL屬性不存在 導(dǎo)致出錯(cuò)
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);};// 攔截二進(jìn)制響應(yīng)流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}復(fù)制代碼
解決
丟棄已有的輪子 閉門造車寫個(gè)原生的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 瀏覽器進(jìn)行下載 window.navigator.msSaveBlob(blob, filename) } else { // 非瀏覽器進(jìn)行下載 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(‘導(dǎo)出錯(cuò)誤’) } } xhr.send()}復(fù)制代碼
React中remove()不兼容
解決
找到該節(jié)點(diǎn)的父節(jié)點(diǎn) 使用removeChild()方法刪除
node.parentNode.removeChild(node)
flex在IE中子元素寬度無效
原始
問題出現(xiàn)在想做一個(gè)橫向滾動(dòng) Apple官網(wǎng)有類似需求
<div class=”node-list”> <div class=”node-item”> </div></div>復(fù)制代碼
當(dāng)node-item的寬度設(shè)定 且個(gè)數(shù)超過node-list的可容納個(gè)數(shù)時(shí) 子元素的寬度失效 所有的子元素都將顯示出來
解決
給父元素 即node-list動(dòng)態(tài)設(shè)置寬度
<div class=”node-list” v-if=”nodeList”> <div class=”node-list” v-if=”nodeList” :style=”{width:`${nodeWidth}px`}”> </div></div>復(fù)制代碼
IE隱藏滾動(dòng)條
解決
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;復(fù)制代碼
總結(jié)
大概就是這么多 后續(xù)如果有遇到新的問題再加進(jìn)去 也歡迎大家提出一點(diǎn)不同的解決和新的問題 造福切圖仔
作者：虛竹子
鏈接：https://juejin.im/post/5d6742f86fb9a06b2116fb34
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
