element-ui 的 el-input 组件 v-model 在 IE9 存在的bug
BUG内容:IE9下 el-input 组件删除内容,失焦后恢复原值
BUG原因:el-input 源码绑定的是 input 事件,而input在IE9 中存在兼容性问题,当通过 Backspace, Delete, Cut 等删除文本时,不触发 input 事件。查看兼容性
解决方案:文档监听 selectionchange 事件, 手动触发input 事件。代码如下:
(function (d) {
if (navigator.userAgent.indexOf('MSIE 9') === -1) return;
d.addEventListener('selectionchange', function() {
var el = d.activeElement;
if (el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && el.type === 'text')) {
var ev = d.createEvent('CustomEvent');
ev.initCustomEvent('input', true, true, {});
el.dispatchEvent(ev);
}
});
})(document);
axios IE8-9 CORS
IE8-9 不支持标准的 CORS,它们基于 XDomainRequest 实现了一套基础版的CORS。可以实现跨域访问,但是相对标准而言,功能不完整。
关于在 IE8-9 中使用 CORS 的注意事项,可以参考
XDomainRequest MDN 与
IE9浏览器支持CORS请求
axios IE9 POST
在 IE9 中,axios 的 post 请求,无法传送正确的参数,具体原因尚未找到,目前是使用 qs 库 来解决这个问题。伪代码如下:
let axiosInstance = axios.create({
baseURL: 'xxxx'
});
export function $POST (path, data) {
data = qs.stringify(data);
axiosInstance.post(path, data);
}
UEditor 单图上传,跨域处理
BUG原因:UEditor 的单图上传,为了兼容性,采用了 iframe + form 提交的方式来提交图片。
分析一下:iframe + form上传图片的原理是,指定 form 的 target 为 iframe 的name,触发post请求后,相当于变向的把form 的 action赋值给了iframe src。上传后,接口返回的信息会存储在 iframe 的 body 中,再通过获取 iframe body 的内容去获取上传后的图片信息。如果此时 form 的 action 属性的域名和当前站点的域名不一致,就出现跨域的情况了,也就无法访问 iframe 内部的内容了
解决方案:需要根据需求而定
A:如果只需要兼容 IE10+,可以直接修改ueditor.all.js源码,采用 ajax + FormData的方式上传。
B:如果需要兼容到 IE9,可以这样处理:
①:修改源码中form的html,加一个隐藏域<input type="hidden" name="issimpleupload" value="true"/>,作为单图上传的标识。
②:前端需要在当前站点域名下新建一个中间页,后端接口在上传成功后,判断如果是单图上传,就重定向到这个中间页,并在 URL 上携带返回的相关图片信息。
③:这个时候,因为中间页是当前站点域名,所以不存在跨域了,而且URL上带有接口返回的数据内容,之后就是修改ueditor.all.js了。
可以直接获取 iframe 的 location对象,再从url中拿到数据。
也可以在中间页添加一段JS逻辑,获取url上的信息,填充到body或其他容器中。
如果加载中间页时存在异步操作(比如单页应用,加载某个url,会先触发前端的token校验再跳转等等),可以在中间页中将url上的信息使用localStorage存储起来,再在ueditor.all.js中使用localStorage的onstorage事件监听。
总结:解决跨域问题的本质,就是想尽千方万法将外部域名弄回到当前域名。
当然,如果在主域名相同的情况下,也可以考虑在接口中输出一段html,html里面加段js,设置document.domain。
有了中间页,我们亦可以尝试使用 window.name 来存储接口返回的信息,方法有很多种,看个人爱好了。
具体可参考:
UEditor1.4.3实现跨域上传到独立文件服务器,完美解决单文件和多文件上传
IE9 提示 是否保存或下载json
BUG原因:IE9 无法解析回调里的json数据,就是说如果服务器返回json数据,IE9 会把它当做文件来处理,显示打开或保存 后端接口设置
解决方案:后端接口设置 response 响应头的Content-type 为 text/html,前端拿到数据后再加一层解析(JSON.parse)即可。
vue-upload-component 的使用总结与跨域处理
设置this.$refs.uploadRefName.active = true会自动触发上传。
inputFilter中执行一些过滤操作,第三个参数prevent是个函数,作用是阻止上传。
inputFile中执行一些发送请求后的操作,newFile或oldFile中的属性:progress,success表示上传进度和是否上传成功。
response属性含有接口返回的数据。
vue-upload-component在IE9会降级使用 iframe + form 的方式来处理上传, 所以也会存在跨域问题。解决方式 和我上面所说的 UEditor 单图上传,跨域处理 类似。都需要修改源码和后端配合。