最近在搞一個基于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 (中國標準時間) IE2、在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 來進行富文本編輯，但是，初始化失?。。。《也粓箦e?。?！
這里使用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
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 了
// 兼容IEif (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();}9、復制粘貼失效！？
測試和我說復制粘貼失效了，我整個人差點爆炸！
冷靜一點...
分析一下：在IE中，復制之后會將回車復制進去，然后黏貼到input標簽時，只展示第一行
//監聽 paste事件MyPaste () { if (window.navigator.userAgent.indexOf('Trident') > 0) { var copyText = window.clipboardData.getData("Text"); this.filters.phoneNum = this.filters.phoneNum ? this.filters.phoneNum + copyText.replace(/[/r/n]/g,"") : copyText.replace(/[/r/n]/g,""); }},...還有好多，但是就不一一講了，其他的應該能查到，byebye
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
