本帖最后由 ljhsnmbb 于 2019-8-30 09:57 编辑
Vue在IE10中无法获取父元素
原始
[JavaScript] 纯文本查看 复制代码 let parent = this.$el.parentElement
解决
这玩意还能咋解决 用原生呗 class、id都行
l[JavaScript] 纯文本查看 复制代码 et parent = document.getElementsByClassName('top-chart')[0]
router-link在IE中没有作用
原始
[JavaScript] 纯文本查看 复制代码 <router-link to="a" tag="div" />
解决
方案1
由于URL的hashChange浏览器没有响应 故我们加个判断
[JavaScript] 纯文本查看 复制代码 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
[JavaScript] 纯文本查看 复制代码 <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);
};
// 拦截二进制响应流
[JavaScript] 纯文本查看 复制代码 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
[JavaScript] 纯文本查看 复制代码 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官网有类似需求
[HTML] 纯文本查看 复制代码 <div class="node-list">
<div class="node-item">
</div>
</div>
复制代码当node-item的宽度设定 且个数超过node-list的可容纳个数时 子元素的宽度失效 所有的子元素都将显示出来
解决
给父元素 即node-list动态设置宽度
[HTML] 纯文本查看 复制代码 <div class="node-list" v-if="nodeList">
<div class="node-list" v-if="nodeList" :style="{width:`${nodeWidth}px`}">
</div>
</div>
复制代码IE隐藏滚动条
解决
[CSS] 纯文本查看 复制代码 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;
链接：https://juejin.im/post/5d6742f86fb9a06b2116fb34
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 | 
收藏
淘帖
踩
