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浏览器没有响应 故我们加个判断

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\” :style=\”{width:`${nodeWidth}px`}\”> </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;复制代码

总结

大概就是这么多 后续如果有遇到新的问题再加进去 也欢迎大家提出一点不同的解决和新的问题 造福切图仔

作者:虚竹子

链接:https://juejin.im/post/5d6742f86fb9a06b2116fb34

来源:掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

React、Vue在IE的兼容问题(react 兼容ie)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年12月28日 上午10:32
下一篇 2023年12月28日 上午10:43

相关推荐

  • 项目管理系统人员分工表

    项目管理系统人员分工表 项目管理系统是一种用于管理项目的工具,可以帮助组织更好地规划和控制项目进度、质量和成本。一个好的项目管理系统需要有效的人员分工,以确保项目能够按时完成并达到…

    科研百科 13小时前
    1
  • 技术先进的项目管理系统

    技术先进的项目管理系统 随着数字化时代的到来,项目管理系统已经成为项目管理中不可或缺的一部分。这些系统可以帮助项目经理更好地组织和管理项目,提高项目效率和质量。今天,我们介绍一下一…

    科研百科 2025年1月18日
    0
  • 项目管理的重要性有哪些

    项目管理的重要性有哪些 项目管理在现代社会扮演着越来越重要的角色。无论是企业还是个人,都需要通过项目管理来确保项目的成功完成。本文将探讨项目管理的重要性,以及如何有效地进行项目管理…

    科研百科 2024年9月4日
    28
  • 协同办公定制

    协同办公定制:提升工作效率和团队凝聚力 随着企业规模的增长和竞争的加剧,协同办公的重要性也越来越凸显。协同办公是指多个员工或团队在一起分享工作资源和信息,协作完成工作任务的过程。在…

    科研百科 2024年8月24日
    45
  • 国家科研项目一等奖

    国家科研项目一等奖 近年来,在科技领域的不断发展和进步下,国家科研项目一等奖成为了科技创新的重要荣誉,代表着一个国家在科学研究方面的杰出成就和优秀表现。本文将介绍一个获得国家科研项…

    科研百科 2025年4月26日
    1
  • 一揽子政策措施实施方案的通知(一揽子优惠政策)

    各市、自治州人民政府,省政府各委、办、厅、局: 《关于贯彻落实国务院扎实稳住经济一揽子政策措施的实施方案》已经省政府第105次常务会议审议通过,现印发给你们,请认真抓好贯彻落实。 …

    科研百科 2022年6月24日
    361
  • 项目管理九大方面

    项目管理在是现代商业中扮演着至关重要的角色。无论是项目启动、规划、执行还是结束,都需要进行有效的管理。以下是项目管理的九大方面: 1. 项目范围管理:确定项目的所有元素,包括范围、…

    科研百科 2024年8月18日
    43
  • 科研项目管理费使用范围

    科研项目管理费使用范围为标题: 科研项目管理费使用范围为: 科研项目管理费是用于资助科学研究项目的一种费用。它通常用于支付实验室设备、人员、材料和其他必要开支。然而,随着科技的快速…

    科研百科 2025年5月24日
    1
  • 青葱守护弊端

    青葱守护弊端 青葱,是自然界中一种美丽的植物,它的茎和叶青翠欲滴,充满了生机和活力。在人类的生活中,青葱也扮演着重要的角色,被人们用来烹饪、调味、药用等方面。然而,青葱的保护和管理…

    科研百科 2024年11月6日
    0
  • 绝了!搞定小说、漫画、影视、听书神器软件推荐!(搞笑听书软件)

    绝了!搞定小说、漫画、影视、听书神器软件推荐!(搞笑听书软件) 嗨,亲爱的小伙伴们!今天要跟大家分享一个超级实用的App,它就像是你的全能助手,能满足你的各种阅读和娱乐需求! 介绍…

    科研百科 2024年3月29日
    117