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

相关推荐

  • 铁道部科研项目

    铁道部科研项目 随着时代的发展,科技的进步,我们越来越依赖科技的力量来推动我们的生活和工作。而在科技领域,科研项目也是不可或缺的一部分。本文将介绍一个铁道部的科研项目。 该项目旨在…

    科研百科 2025年3月9日
    0
  • 大学生自主科研项目的数据被剽窃

    大学生自主科研项目的数据被剽窃 近年来,大学生自主科研项目的数据剽窃问题日益严重。许多大学生花费了大量的时间和精力来开展自己的科研项目,但他们的数据却经常被盗用。这不仅会对他们自己…

    科研百科 2024年4月9日
    112
  • 科研项目的内涵定义是

    科研项目的内涵定义 科研项目是指为了探索未知领域或解决特定问题而进行的一系列实验、观察和分析工作。科研项目的内涵定义包括以下几个方面: 1. 研究目标:科研项目的研究目标是指要解决…

    科研百科 2025年5月21日
    1
  • 用 Python 开发一个企业级的监控平台(用 python 开发一个企业级的监控平台)

    【原创】 2018-01-22 郭宏泽 高效运维 作者简介: 郭宏泽,现任为胜科技技术总监,高级咨询师,IT解决方案专家。拥有12年IT行业工作经验,其中有8年一线运维经验,4年运…

    科研百科 2024年5月20日
    103
  • MAC看图软件

    MAC看图软件 MAC看图软件是苹果公司推出的一款看图软件,旨在为MAC操作系统的用户提供更好的图片查看和编辑功能。以下是MAC看图软件的一些特点和优势。 MAC看图软件具有出色的…

    科研百科 2024年11月13日
    1
  • 前端开发开源低代码平台

    前端开发是近年来迅速发展的领域之一,随着互联网的普及和技术的进步,越来越多的企业和个人开始重视前端开发的重要性。然而,传统的前端开发过程通常需要耗费大量的时间和精力,这对于一些项目…

    科研百科 2024年2月25日
    98
  • 博克MTM高级定制下单系统-博克时代(博克高级定制版)

    当今时代,个性化已经成为了时尚的代名词。人们越来越注重自己的独特性,而这一趋势也在时尚领域中得到了体现。随着消费者对于高品质、独特性和个性化的需求不断增长,定制已经成为了时尚行业的…

    科研百科 2024年5月2日
    99
  • digikam

    digikam:探索数字相机的无限可能 数字相机已经成为我们日常生活中不可或缺的一部分。它们不仅可以捕捉珍贵的瞬间,还可以让我们探索数字世界的美好。在本文中,我们将介绍digika…

    科研百科 2024年10月31日
    0
  • 店面项目管理系统

    店面项目管理系统:提升店面运营效率的关键 随着现代商业的快速发展,店面项目管理系统已经成为了提升店面运营效率的关键。一套完善的店面项目管理系统可以帮助店面管理人员更好地管理项目,提…

    科研百科 2024年12月13日
    0
  • 加快构建数据基础制度体系(加快构建数据基础制度体系的意义)

    来源:人民网-人民日报 数据作为新型生产要素,是数字化、网络化、智能化的基础,已快速融入生产、分配、流通、消费和社会服务管理等各个环节,深刻改变着生产方式、生活方式和社会治理方式,…

    科研百科 2022年8月4日
    268