兼容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']来存储数据