IE11浏览器的几个兼容性问题

        公司有个vue + element ui + axios + webpack的PC端后台管理系统,要求运行的浏览器是IE 11,在开发的过程中踩了很多坑,记录如下几个问题。

问题1:js中两个看上去相等的字符串,如:“测试卡1”,用“==”和“===”判断,均为false。用encodeURIComponent()处理后的结果分别为:%E6%B5%8B%E8%AF%95%E5%8D%A11 和 %E6%B5%8B%E8%AF%95%E5%8D%A11%00,明显不一样。

解决方案:使用localeCompare()方法进行两个字符串的比较,localeCompare()方法有三个返回值:0-相等,-1、1均是不相等。

问题2:通过get请求获取后台数据,发现后台接收到的中文是乱码。

解决方案:在前端使用encodeURI()对中文字符编码后再传到后台。

问题3:列表页面只在页面加载时刷新数据,页面返回和点击页面上的查询按钮均不刷新数据。

解决方案:排查发现是由于使用了keep-alive组件,页面缓存导致不向后台请求数据导致的。最后在axios的请求拦截器里加入一个当前的时间戳使每个get请求都是一个新的请求,解决了此问题。

问题4:在form表单中的输入框按回车时,页面进行跳转。

解决方案:由于W3C 标准中规定:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。而在<el-form> 标签上添加 @submit.native.prevent,可以阻止表单提交。

猜你喜欢

转载自blog.csdn.net/weixin_41269811/article/details/106960070