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 文檔