最近在搞一個基於vue的後臺管理系統相容IE瀏覽器，眼淚都要掉下來。後來和產品說了，同意相容IE11，感動得我眼淚啊

這裡也就是記錄一下我遇到的超級煩的bug

 首先是'babel-polyfill' 和 "autoprefixer-loader" 這個不用多說，資源一大堆

然後 打包之後一直  const  去不掉，查了之後是 webpack 有 webpack-dev 不支援IE低版本了，要把 webpack 版本往下調，我是拒絕的

1、IE  new Date() 失敗

new Date('2018-1-1')
//Mon Jan 01 2018 00:00:00 GMT+0800 (中國標準時間)   chrome
//Invalid Date                                      IE

new Date('2018/1/1')
//Mon Jan 01 2018 00:00:00 GMT+0800 (中國標準時間)   chrome
//Mon Jan 01 2018 00:00:00 GMT+0800 (中國標準時間)   IE
 

2、在IE裡，點選 input type=checkbox 多次點選會邏輯混亂

原因：在 IE中，多次點選之後會同時出發 dblclick 和 click 事件，而這兩個事件是一起執行了 click 事件，會導致click 事件失效

$("input[type='checkbox']").attr('ondblclick', 'this.click()');

或

$('.content').on('dblclick','input[type="checkbox"]',function(){
   this.click();   //  把雙擊事件變成單擊事件 
})
注意，要判斷是否是IE瀏覽器，要不然會把chrome 帶進溝裡
 

3、input placeholder 會觸發 input 事件

  意思就是說你渲染上去了，可能會自動觸發一次 input，然後清空了文字，又觸發一次

  重點是，IE tm 的不要臉地承認了！！說不影響安全，俺們就不修復了哈

  這東西的相容就見仁見智了，用span 來代替 placeholder 也是可以的嘛，不多嗶嗶

4、Input type=file 中，將 其置空清除 快取會在IE中觸發 change 事件，

var fileName = $(this).val();
filename == undefined

  這東西的相容就見仁見智了，可以判斷一下filename，不多嗶嗶

5、input type=text 中，text-overflow: ellpsis失效

input輸入框如果東西太多，希望展示位   ...  省略號，但是chrome成功了，IE失敗了

需要將 input 標籤置為 readonly 才能起作用

沒錯，這東西是 iview select 裡的 input標籤
So:
initTheSelect () {
  var input = document.querySelector('.ellipsisInput .ivu-select-selection .ivu-select-input');
  input.setAttribute('readonly', true);
  input.addEventListener('click', function (params) {
    input.removeAttribute('readonly');
    input.focus()
  });
  input.addEventListener('blur', function (params) {
    input.setAttribute('readonly', true);
  })
},

6、在IE中，本系統是 使用了cookie 來儲存驗證資訊的，但是沒多久就能發現傳送的請求都不攜帶cookie而導致重新登入

查看了，是304 即讀取快取的時候，不會攜帶cookie，然後一旦讀到一個  重新登入，你這個系統基本就完了，一直從快取裡讀取，你登入了？誒，有快取，我拿快取吧。

快取：咳咳，你不是上次重新登陸嗎？我給你存著呢，給給給，重新登入去吧。

所以要麼設定IE不快取，要麼程式碼改

 後端設定，前端的設定要麼不保險(神tm時靈時不靈)，要麼就是太麻煩，後端幾行程式碼搞定
不允許瀏覽器端或快取伺服器快取當前頁面資訊。
response.setHeader( "Pragma", "no-cache" );   
response.setDateHeader("Expires", 0);   
response.addHeader( "Cache-Control", "no-cache" );//瀏覽器和快取伺服器都不應該快取頁面資訊
response.addHeader( "Cache-Control", "no-store" );//請求和響應的資訊都不應該被儲存在對方的磁碟系統中；    
response.addHeader( "Cache-Control", "must-revalidate" );*//於客戶機的每次請求，代理伺服器必須想伺服器驗證快取是否過時；

2018-11-14

僵持住了，還是我這邊改吧

axios.interceptors.request.use(
    config => {
         // 給每個請求加上一個 ieT 的時間引數
        if (window.navigator.userAgent.indexOf('Trident') > -1) {
            config.url = config.url + `?ieT=${new Date().getTime()}`
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

7、本系統使用了 tinymce 來進行富文字編輯，但是，初始化失敗！！！而且不報錯！！！

這裡使用tingmce只是匯入了  tinymce一個檔案，其他檔案都放進了 dist 資料夾之中，然後讓他自己去讀取檔案

不知道為什麼網上一點資源都沒有，難道全世界就我一個人碰到了？可是這bug我去其他系統上必現的呀，老哥

Tinymce.js

這bug困擾了我整整兩天！！一行一行在IE裡面debug，對比chrome裡的debug終於有結果了
是tinymce在IE中的基本路徑表現和chrome不一致，改原始碼
Tinymce.js
var load = function (name, addOnUrl, success, scope, failure) {
  if (urls[name]) {
  return;
}
var urlString = typeof addOnUrl === 'string' ? addOnUrl : addOnUrl.prefix + 
  addOnUrl.resource + addOnUrl.suffix;
  if (urlString.indexOf('/') !== 0 && urlString.indexOf('://') === -1) {
    // 相容IE 瀏覽器
    // 在load函式中，需要判斷 當前瀏覽器，然後加上 dist
    urlString = AddOnManager.baseURL + 'dist/' + urlString;
    console.log(urlString)
  }
  urls[name] = urlString.substring(0, urlString.lastIndexOf('/'));
    if (lookup[name]) {
       loadDependencies(name, addOnUrl, success, scope);
    } else {
      ScriptLoader.ScriptLoader.add(urlString, function () {
        return loadDependencies(name, addOnUrl, success, scope);
      }, scope, failure);
    }
};


var loadLanguage = function (scriptLoader, editor) {
  var settings = editor.settings;
  if (settings.language && settings.language !== 'en' && !settings.language_url) {
  // 相容IE瀏覽器
    if (window.navigator.userAgent.indexOf('Trident') > 0) {
      settings.language_url = editor.editorManager.baseURL + '/dist/langs/' + 
      settings.language + '.js';
    } else {
      settings.language_url = editor.editorManager.baseURL + '/langs/' + 
      settings.language  + '.js';
    }

  }
  if (settings.language_url && !editor.editorManager.i18n.data[settings.language]) {
    scriptLoader.add(settings.language_url);
  }
};

Theme.js

Theme.js
var getSkinUrl = function (editor) {
  var settings = editor.settings;
  var skin = settings.skin;
  var skinUrl = settings.skin_url;

  if (skin !== false) {
    var skinName = skin ? skin : 'lightgray';

    if (skinUrl) {
      skinUrl = editor.documentBaseURI.toAbsolute(skinUrl);
    } else {
    // 相容IE 瀏覽器
      if (window.navigator.userAgent.indexOf('Trident') > 0) {
        skinUrl = EditorManager.baseURL + '/dist/skins/' + skinName;
      } else {
         skinUrl = EditorManager.baseURL + '/skins/' + skinName;
      }
    }
  }

  return skinUrl;
};

8、匯出excel檔案

其實我是傾向於使用 iview 自帶的 exportCsv 的，但是 其

不會執行 columns 裡的render、

匯出的數字 0002 開啟會變成 2

。。。

很多問題，沒辦法，這個檔案天生的，避免不了

IE 的話，又不相容 download屬性、我的系統又說什麼阻止了正向與反向快取什麼的，點進去還蠻多符合的東西的，結果window.href 也gg，只能使用 msSaveBlob 了

// 相容IE
if (window.navigator.msSaveOrOpenBlob) {
  const blob = new Blob([template], {type: "application/vnd.ms-excel"})
  navigator.msSaveBlob(blob, this.name.indexOf('xls') > 0 ? this.name : this.name + 
  '.xls');
} else {
  let link = document.createElement('a');
  link.href = uri + this.base64(template);
  link.download = this.name.indexOf('xls') > 0 ? this.name : this.name + '.xls';
  link.click();
}

...

還有好多，但是就不一一講了，其他的應該能查到，byebye