### 一、招商盾新页面登录失效

#### 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’]来存储数据