### 一、招商盾新頁面登錄失效

#### 1.問題描述

現有兩個PC系統，分別是招I寶、優智保，兩個系統共用同一后端服務。
由于項目特殊，招I寶前端部署在金科服務器，優智保前端部署在第三方服務器，后端服務部署在金科服務。
前端采用cookie存儲用戶信息，前端兩個系統的用戶信息通過cookie key來作區分，不同系統通過不同key來獲取用戶信息，后端用戶session未作區分。
在招商盾瀏覽器中登錄招I寶，在登錄成功的前提下新標簽頁打開招I寶任意頁面，彈窗提示用戶登錄已失效或未登錄。該問題只能在招商盾中復現，在其他瀏覽器均無此問題。

#### 2.解決方案

由于招商盾無法進行程序調試，該問題無法準確定位，只能懷疑是與招商盾瀏覽器設置有關。
為解決該問題，前端不在本地使用cookie存儲用戶信息，用戶信息只通過接口獲取，依靠后端利用session進行登錄狀態控制。同時，后端設置同一域名下只允許登錄一個系統，前端表現為：同一瀏覽器下同時登錄兩個系統時將自動踢出較早登錄的賬戶。這樣保證了后端session只允許一用戶一值，避免兩個系統用戶信息混淆、串單。

### 二、IE8跨域兼容

#### 1.問題描述

由于前后端分離部署，接口存在跨域問題。

#### 2.解決方案

前端使用的jquery(v1.9)和jquery.xdr.js(xDomainRequest)，一共三個設置。

前端設置

```
$.support.cors=true; //ie8,9下xDomainRequest攜帶第三方cookie
```

```
$.ajax({
crossDomain:true,
xhrFields:{withCredentials:true} //xmlHttpRequest攜帶第三方cookie
})
```

后臺設置

```
res.header('Access-Control-Allow-Origin', '前端使用的域名');
res.header('Access-Control-Allow-Methods', 'OPTIONS,GET,PUT,POST,DELETE');
res.header('P3P', 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header("Access-Control-Allow-Credentials", "true");
```

注意點：

IE8、9使用xDomainRequest來發起請求，無法設置request.header 'application/json'，默認發送的數據格式為application/oct-stream，后端統一使用流接收數據，再解析成需要的格式。

### 三、PDF招商盾預覽兼容

#### 1.問題描述

通過直接打開pdf會觸發瀏覽器的預覽行為，可能是招商盾中可能是adobe被禁用了，所以預覽不出來，也無法下載。
ie瀏覽器中不支持a標簽中的download屬性，會使用直接打開文件的方式來觸發下載，但是也可能觸發瀏覽器的預覽行為。

#### 2.解決方案

- 使用pdf.js閱覽pdf；
- 使用nginx代理一層路徑作為下載路徑，并添加返回頭信息add_header Content-Disposition "attachment"，主動觸發瀏覽器的下載動作。

### 四、保單下載瀏覽器兼容

#### 1.問題描述

在開發對接仁和、華泰、國壽三大保險公司進行投保并生成保單下載過程中，由于每一個保險公司給出的電子保單下載形式皆不同。如國壽保險提供了文件流的形式、華泰保險提供了下載URL的形式，不同瀏覽器會有不同的兼容問題，如qq、360瀏覽器會誤把請求電子保單接口的URL認為是下載鏈接、IE瀏覽器不支持a.download方法。

#### 2.解決方案

針對這種情況和考慮到瀏覽器兼容的問題，需要對不同情況作出判斷：

- qq、360等瀏覽器把請求電子保單的接口設置成偽文件鏈接的形式：如https:xxxx.com/api/dl?id=123.pdf，然后后端配合，對請求參數進行截斷處理，結果回歸正常。
- IE、IE內核的瀏覽器不支持a.download，針對這種情況，進行兼容性判斷，并使用window.open()打開電子保單URL讓用戶在瀏覽器中保存PDF或者直接下載(招商盾)。

### 五、輪播插件IE8兼容

#### 1.問題描述

輪播容器自適應窗口寬度，為保證圖片不被拉升，使用背景圖，但是IE8不支持background-size屬性。

#### 2.解決方案

使用filter來替代

```
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='圖片地址', sizingMethod='scale')
```

### 六、IE、Firefox瀏覽器緩存擊穿

#### 1.問題描述

測試中發現，在IE、Firefox瀏覽器中(IE尤為嚴重)，常常出現緩存命中：請求只讀取瀏覽器緩存的情況(盡管使用瀏覽器自帶的緩存清理后仍存在，估計與內存釋放不及時有關)。

#### 2.解決方案

為了擊穿瀏覽器緩存，我們采用了比較常見的做法，對全局的ajax網絡請求進行URL特殊標識，如URL后添加隨機數，讓URL請求不再變成`HTTP 304 Not Modified`，而是每次都是一次新的請求。可以持續優化之處：可以針對不需要擊穿緩存的URL設置白名單，讓瀏覽器自行讀取管理資源緩存。

### 七、IE unselectable影響事件響應順序問題

#### 1.問題描述

輸入證件信息后，日期輸入框需鎖定；日期輸入框使用input來響應點擊事件，觸發選擇器；為阻止獲取焦點IE在不支持readonly屬性時使用unselectable='no'，該屬性造成事件響應順序混亂，添加該屬性的元素的input框的點擊事件會比其他輸入框的change/blur事件先執行。

#### 2.解決方案

使用div來替代input框，input[type='hidden']來存儲數據

總結

以上是生活随笔為你收集整理的兼容ie8的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。