vue+iview 兼容IE11瀏覽器的實(shí)現(xiàn)方法
最近在搞一個基于vue的后臺管理系統(tǒng)兼容IE瀏覽器，眼淚都要掉下來。后來和產(chǎn)品說了，同意兼容IE11，感動得我眼淚啊
這里也就是記錄一下我遇到的超級煩的bug
首先是'babel-polyfill' 和 "autoprefixer-loader" 這個不用多說，資源一大堆
然后 打包之后一直 const 去不掉，查了之后是 webpack 有 webpack-dev 不支持IE低版本了，要把 webpack 版本往下調(diào)，我是拒絕的
1、IE new Date() 失敗
new Date('2018-1-1')
//Mon Jan 01 2018 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間) chrome
//Invalid Date IE
new Date('2018/1/1')
//Mon Jan 01 2018 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間) chrome
//Mon Jan 01 2018 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間) IE
2、在IE里，點(diǎn)擊 input type=checkbox 多次點(diǎn)擊會邏輯混亂
原因：在 IE中，多次點(diǎn)擊之后會同時出發(fā) dblclick 和 click 事件，而這兩個事件是一起執(zhí)行了 click 事件，會導(dǎo)致click 事件失效
$("input[type='checkbox']").attr('ondblclick', 'this.click()');
或
$('.content').on('dblclick','input[type="checkbox"]',function(){
this.click(); // 把雙擊事件變成單擊事件
})
注意，要判斷是否是IE瀏覽器，要不然會把chrome 帶進(jìn)溝里
3、input placeholder 會觸發(fā) input 事件
意思就是說你渲染上去了，可能會自動觸發(fā)一次 input，然后清空了文本，又觸發(fā)一次
重點(diǎn)是，IE tm 的不要臉地承認(rèn)了??！說不影響安全，俺們就不修復(fù)了哈
這東西的兼容就見仁見智了，用span 來代替 placeholder 也是可以的嘛，不多嗶嗶
4、Input type=file 中，將 其置空清除 緩存會在IE中觸發(fā) change 事件，
var fileName = $(this).val(); filename == undefined
這東西的兼容就見仁見智了，可以判斷一下filename，不多嗶嗶
5、input type=text 中，text-overflow: ellpsis失效
input輸入框如果東西太多，希望展示位 ... 省略號，但是chrome成功了，IE失敗了
需要將 input 標(biāo)簽置為 readonly 才能起作用
沒錯，這東西是 iview select 里的 input標(biāo)簽
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中，本系統(tǒng)是 使用了cookie 來保存驗(yàn)證信息的，但是沒多久就能發(fā)現(xiàn)發(fā)送的請求都不攜帶cookie而導(dǎo)致重新登錄
查看了，是304 即讀取緩存的時候，不會攜帶cookie，然后一旦讀到一個 重新登錄，你這個系統(tǒng)基本就完了，一直從緩存里讀取，你登錄了？誒，有緩存，我拿緩存吧。
緩存：咳咳，你不是上次重新登陸嗎？我給你存著呢，給給給，重新登錄去吧。
所以要么設(shè)置IE不緩存，要么代碼改
后端設(shè)置，前端的設(shè)置要么不保險(神tm時靈時不靈)，要么就是太麻煩，后端幾行代碼搞定
不允許瀏覽器端或緩存服務(wù)器緩存當(dāng)前頁面信息。
response.setHeader( "Pragma", "no-cache" );
response.setDateHeader("Expires", 0);
response.addHeader( "Cache-Control", "no-cache" );//瀏覽器和緩存服務(wù)器都不應(yīng)該緩存頁面信息
response.addHeader( "Cache-Control", "no-store" );//請求和響應(yīng)的信息都不應(yīng)該被存儲在對方的磁盤系統(tǒng)中；
response.addHeader( "Cache-Control", "must-revalidate" );*//于客戶機(jī)的每次請求，代理服務(wù)器必須想服務(wù)器驗(yàn)證緩存是否過時；
2018-11-14
僵持住了，還是我這邊改吧
axios.interceptors.request.use(
config => {
// 給每個請求加上一個 ieT 的時間參數(shù)
if (window.navigator.userAgent.indexOf('Trident') > -1) {
config.url = config.url + `?ieT=${new Date().getTime()}`
}
return config;
},
err => {
return Promise.reject(err);
});
7、本系統(tǒng)使用了 tinymce 來進(jìn)行富文本編輯，但是，初始化失?。。?！而且不報錯?。?！
這里使用tingmce只是導(dǎo)入了 tinymce一個文件，其他文件都放進(jìn)了 dist 文件夾之中，然后讓他自己去讀取文件
不知道為什么網(wǎng)上一點(diǎn)資源都沒有，難道全世界就我一個人碰到了？可是這bug我去其他系統(tǒng)上必現(xiàn)的呀，老哥
Tinymce.js
這bug困擾了我整整兩天??！一行一行在IE里面debug，對比chrome里的debug終于有結(jié)果了
是tinymce在IE中的基本路徑表現(xiàn)和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函數(shù)中，需要判斷 當(dāng)前瀏覽器，然后加上 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、導(dǎo)出excel文件
其實(shí)我是傾向于使用 iview 自帶的 exportCsv 的，但是 其
不會執(zhí)行 columns 里的render、
導(dǎo)出的數(shù)字 0002 打開會變成 2
。。。
很多問題，沒辦法，這個文件天生的，避免不了
IE 的話，又不兼容 download屬性、我的系統(tǒng)又說什么阻止了正向與反向緩存什么的，點(diǎn)進(jìn)去還蠻多符合的東西的，結(jié)果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();
}
9、復(fù)制粘貼失效！？
測試和我說復(fù)制粘貼失效了，我整個人差點(diǎn)爆炸！
冷靜一點(diǎn)...
分析一下：在IE中，復(fù)制之后會將回車復(fù)制進(jìn)去，然后黏貼到input標(biāo)簽時，只展示第一行
//監(jiān)聽 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,"");
}
},
...
還有好多，但是就不一一講了，其他的應(yīng)該能查到，byebye
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用VUE3開發(fā)很久了,但一直沒進(jìn)行總結(jié)和記錄,忙里偷閑整理搭建一套VUE3項(xiàng)目腳手架,下面這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目搭建的詳細(xì)過程,需要的朋友可以參考下2022-10-10
解決vue中菜單再次點(diǎn)擊內(nèi)容不刷新問題
當(dāng)elementUI中菜單打開后,再次點(diǎn)擊不會刷新的問題,導(dǎo)致菜單再次點(diǎn)擊不刷新的根本原因是頁面打開后,再次打開相同的頁面是不會刷新的,這應(yīng)該是框架的機(jī)制就是如此,小編整理了兩個比較不錯的解決方法,需要的朋友可以參考下2023-08-08
本文主要介紹了vue/react單頁應(yīng)用后退不刷新方案，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue系列之requireJs中引入vue-router的方法
這篇文章主要介紹了vue系列之requireJs中引入vue-router的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Nuxt升級2.0.0時出現(xiàn)的問題(小結(jié))
這篇文章主要介紹了Nuxt升級2.0.0時出現(xiàn)的問題(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
vue中用H5實(shí)現(xiàn)文件上傳的方法實(shí)例代碼
本篇文章主要介紹了vue中用H5實(shí)現(xiàn)文件上傳的方法實(shí)例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vue3中router路由以及vuex的store使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
本文主要介紹一下Vue.js并附上在Node.js環(huán)境下搭建一個簡單的Demo實(shí)例代碼。條理清晰，有助于閱讀和理解。有需要的朋友可以看下2016-12-12
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-10-10
很多朋友遇到這樣的問題當(dāng)vue打包后顯示空白問題，遇到這樣的問題怎么處理呢？下面腳本之家小編給大家分享下vue打包后顯示空白正確處理方法，感興趣的朋友一起看看吧2017-11-11