繞不過去的坑, ie兼容

ie兼容應該是每一個前端都繞不過去的問題, 雖然早已聽聞它的惡名,但之前都沒有解決過, 終於在本週遇到了兩個, 在此記錄一下問題與解決辦法。

ie的緩存

第一個問題, 增長了數據之後並不能看到新增的數據, 這是由於獲取的都是緩存的數據。

IE瀏覽器會緩存網頁中的GET和XHR的內容，請求方式是get方式時，IE瀏覽器會進行識別。若是該get請求的url是第一次請求的話，會請求服務器，從數據庫中獲取數據；若是該get請求的url不是第一次請求的話，那麼該url就不會請求服務器，IE瀏覽器會直接從緩存中拿到上次該url獲取的數據。不管是什麼插件的get方式請求，IE瀏覽器都會這樣進行處理的，從而致使數據不一樣步。

解決辦法

解決辦法有不少,下面介紹兩個我以爲較好的

在header中設置no-cache參數

let headers = request.headers;

    /**
     * 發起get請求時判斷是不是ie是的話加上no-cache  由於ie會緩存全部的get請求
     */
    // 判斷是不是ie 下面的方法可測ie6~ie11
    // https://stackoverflow.com/questions/48182912/how-to-detect-browser-with-angular
    // @ts-ignore
    const isIE = false || !!document.documentMode;
    if (request.method === 'GET' && isIE) {
      headers = headers.append('Cache-Control', 'no-cache');
      headers = headers.append('Pragma', 'no-cache');
    }

在請求中增長一個時間戳

潘老師提供了另外一個思路, 既然會緩存GET請求, 那麼讓每次的請求不同就好了, 這個能夠經過增長一個時間戳參數來實現。

感受這個設定真的太坑了。

pointer-events

項目中用到了sweetalert，可是每次彈窗後，頁面就沒法在點擊了，潘老師猜想是由於有一層蒙版沒有取消，可是爲啥也不清楚，頁面也不報錯。後來在sweetalert的github找到了緣由

由於ie11如下都不支持pointer-events這個css屬性，關於什麼是pointer-events

pointer-events 是CSS3的一個屬性，支持的值很是多，其中大部分都是和SVG有關。對於前端平常開發而言，只要瞭解 none 這個值就已經夠咱們玩一段時間了。

pointer-events: none; 讓鼠標事件失效（連接、點擊等事件）。

解決辦法

上面的做者已經回答了能夠用visibility這個屬性來代替pointer-events隱藏彈窗，而且給出瞭解決的css

/*  只支持IE八、九、10  */
/*
Target IE8-IE10 due to incompability with the css \`pointer-event\` property.

@see https://github.com/t4t5/sweetalert/issues/863
*/

@media screen\0 {

.swal-overlay {

visibility: hidden;

}
.swal-overlay--show-modal {

visibility: visible;

}

  

.swal-button__loader {

visibility: hidden;

}
.swal-overlay--show-modal .swal-modal {

visibility: visible;

}
.swal-modal {

visibility: hidden;

}
}

這個問題在最新的sweetalert代碼中已經解決，但尚未發佈到npm中。具體狀況請看這個issue。