兼容ie8

### 1、招商盾新頁面登陸失效

#### 1.問題描述

現有兩個PC系統，分別是招I寶、優智保，兩個系統共用同一後端服務。

因爲項目特殊，招I寶前端部署在金科服務器，優智保前端部署在第三方服務器，後端服務部署在金科服務。

前端採用cookie存儲用戶信息，前端兩個系統的用戶信息經過cookie key來做區分，不一樣系統經過不一樣key來獲取用戶信息，後端用戶session未做區分。

在招商盾瀏覽器中登陸招I寶，在登陸成功的前提下新標籤頁打開招I寶任意頁面，彈窗提示用戶登陸已失效或未登陸。該問題只能在招商盾中復現，在其餘瀏覽器均無此問題。

#### 2.解決方案

因爲招商盾沒法進行程序調試，該問題沒法準肯定位，只能懷疑是與招商盾瀏覽器設置有關。

爲解決該問題，前端不在本地使用cookie存儲用戶信息，用戶信息只經過接口獲取，依靠後端利用session進行登陸狀態控制。同時，後端設置同一域名下只容許登陸一個系統，前端表現爲：同一瀏覽器下同時登陸兩個系統時將自動踢出較早登陸的帳戶。這樣保證了後端session只容許一用戶一值，避免兩個系統用戶信息混淆、串單。

### 2、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");

```

注意點：

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

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

#### 1.問題描述

經過直接打開pdf會觸發瀏覽器的預覽行爲，多是招商盾中多是adobe被禁用了，因此預覽不出來，也沒法下載。

ie瀏覽器中不支持a標籤中的download屬性，會使用直接打開文件的方式來觸發下載，可是也可能觸發瀏覽器的預覽行爲。

#### 2.解決方案

- 使用pdf.js閱覽pdf；

- 使用nginx代理一層路徑做爲下載路徑，並添加返回頭信息add_header Content-Disposition "attachment"，主動觸發瀏覽器的下載動做。

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

#### 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或者直接下載(招商盾)。

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

#### 1.問題描述

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

#### 2.解決方案

使用filter來替代

```

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

```

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

#### 1.問題描述

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

#### 2.解決方案

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

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

#### 1.問題描述

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

#### 2.解決方案

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