2019-02-23周记-工作小总结

element-ui 的 el-input 组件 v-model 在 IE9 存在的bug

issues

BUG内容：IE9下 el-input 组件删除内容，失焦后恢复原值

BUG原因：el-input 源码绑定的是 input 事件，而input在IE9 中存在兼容性问题，当通过 Backspace, Delete， Cut 等删除文本时，不触发 input 事件。查看兼容性

解决方案：文档监听 selectionchange 事件， 手动触发input 事件。代码如下：

代码出处：github.com/buzinas/ie9…

(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 来存储接口返回的信息，方法有很多种，看个人爱好了。

具体可参考：

ueditor简单图片上传，iframe跨域问题的完美解决

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 单图上传，跨域处理 类似。都需要修改源码和后端配合。

vue-upload-component 文档