vue+iview 兼容IE11瀏覽器的實(shí)現(xiàn)方法

發(fā)布時(shí)間：2020-08-26 01:42:31 來(lái)源：腳本之家閱讀：377 作者：dongceha 欄目：web開(kāi)發(fā)

最近在搞一個(gè)基于vue的后臺(tái)管理系統(tǒng)兼容IE瀏覽器，眼淚都要掉下來(lái)。后來(lái)和產(chǎn)品說(shuō)了，同意兼容IE11，感動(dòng)得我眼淚啊

這里也就是記錄一下我遇到的超級(jí)煩的bug

首先是'babel-polyfill' 和 "autoprefixer-loader" 這個(gè)不用多說(shuō)，資源一大堆

然后打包之后一直 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 (中國(guó)標(biāo)準(zhǔn)時(shí)間)  chrome
//Invalid Date                   IE
 
new Date('2018/1/1')
//Mon Jan 01 2018 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)  chrome
//Mon Jan 01 2018 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)  IE

2、在IE里，點(diǎn)擊 input type=checkbox 多次點(diǎn)擊會(huì)邏輯混亂

原因：在 IE中，多次點(diǎn)擊之后會(huì)同時(shí)出發(fā) dblclick 和 click 事件，而這兩個(gè)事件是一起執(zhí)行了 click 事件，會(huì)導(dǎo)致click 事件失效

$("input[type='checkbox']").attr('ondblclick', 'this.click()');
 
或
 
$('.content').on('dblclick','input[type="checkbox"]',function(){
  this.click();  // 把雙擊事件變成單擊事件 
})

注意，要判斷是否是IE瀏覽器，要不然會(huì)把chrome 帶進(jìn)溝里

3、input placeholder 會(huì)觸發(fā) input 事件

意思就是說(shuō)你渲染上去了，可能會(huì)自動(dòng)觸發(fā)一次 input，然后清空了文本，又觸發(fā)一次

重點(diǎn)是，IE tm 的不要臉地承認(rèn)了！！說(shuō)不影響安全，俺們就不修復(fù)了哈

這東西的兼容就見(jiàn)仁見(jiàn)智了，用span 來(lái)代替 placeholder 也是可以的嘛，不多嗶嗶

4、Input type=file 中，將其置空清除緩存會(huì)在IE中觸發(fā) change 事件，

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

這東西的兼容就見(jiàn)仁見(jiàn)智了，可以判斷一下filename，不多嗶嗶

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

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

需要將 input 標(biāo)簽置為 readonly 才能起作用

沒(méi)錯(cuò)，這東西是 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 來(lái)保存驗(yàn)證信息的，但是沒(méi)多久就能發(fā)現(xiàn)發(fā)送的請(qǐng)求都不攜帶cookie而導(dǎo)致重新登錄

查看了，是304 即讀取緩存的時(shí)候，不會(huì)攜帶cookie，然后一旦讀到一個(gè) 重新登錄，你這個(gè)系統(tǒng)基本就完了，一直從緩存里讀取，你登錄了？誒，有緩存，我拿緩存吧。

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

所以要么設(shè)置IE不緩存，要么代碼改

后端設(shè)置，前端的設(shè)置要么不保險(xiǎn)(神tm時(shí)靈時(shí)不靈)，要么就是太麻煩，后端幾行代碼搞定

不允許瀏覽器端或緩存服務(wù)器緩存當(dāng)前頁(yè)面信息。

response.setHeader( "Pragma", "no-cache" );  
response.setDateHeader("Expires", 0);  
response.addHeader( "Cache-Control", "no-cache" );//瀏覽器和緩存服務(wù)器都不應(yīng)該緩存頁(yè)面信息
response.addHeader( "Cache-Control", "no-store" );//請(qǐng)求和響應(yīng)的信息都不應(yīng)該被存儲(chǔ)在對(duì)方的磁盤系統(tǒng)中；  
response.addHeader( "Cache-Control", "must-revalidate" );*//于客戶機(jī)的每次請(qǐng)求，代理服務(wù)器必須想服務(wù)器驗(yàn)證緩存是否過(guò)時(shí)；

2018-11-14

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

axios.interceptors.request.use(
  config => {
     // 給每個(gè)請(qǐng)求加上一個(gè) ieT 的時(shí)間參數(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 來(lái)進(jìn)行富文本編輯，但是，初始化失?。。?！而且不報(bào)錯(cuò)！??！

這里使用tingmce只是導(dǎo)入了 tinymce一個(gè)文件，其他文件都放進(jìn)了 dist 文件夾之中，然后讓他自己去讀取文件

不知道為什么網(wǎng)上一點(diǎn)資源都沒(méi)有，難道全世界就我一個(gè)人碰到了？可是這bug我去其他系統(tǒng)上必現(xiàn)的呀，老哥

Tinymce.js

這bug困擾了我整整兩天！！一行一行在IE里面debug，對(duì)比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 的，但是其

不會(huì)執(zhí)行 columns 里的render、

導(dǎo)出的數(shù)字 0002 打開(kāi)會(huì)變成 2

。。。

很多問(wèn)題，沒(méi)辦法，這個(gè)文件天生的，避免不了

IE 的話，又不兼容 download屬性、我的系統(tǒng)又說(shuō)什么阻止了正向與反向緩存什么的，點(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ù)制粘貼失效！？

測(cè)試和我說(shuō)復(fù)制粘貼失效了，我整個(gè)人差點(diǎn)爆炸！

冷靜一點(diǎn)...

分析一下：在IE中，復(fù)制之后會(huì)將回車復(fù)制進(jìn)去，然后黏貼到input標(biāo)簽時(shí)，只展示第一行

//監(jiān)聽(tīng) 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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

vue+iview 兼容IE11瀏覽器的實(shí)現(xiàn)方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽