vue+iview 相容IE瀏覽器
最近在搞一個基於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