最初对做兼容性的认知只停留在UI层面,但其实UI层面都还好,因为毕竟你可以直接看得见现象,更为重要的是在JavaScript层面,因为这个部分涉及到功能性,前者最多是体验性的问题。下面扯一下这几天遇到的IE8相关的兼容性问题。
1.所有$.ajax失效
刚开始看到的现象是IE8/9页面切到了留言页面,没有进入正常流程。打开fiddler都没抓到请求,奇怪了,打出$.ajax error方法中的返回值。xhr.status的值都是0,原来请求没有发出去。心想:怎么没有发出去呢,难道是跨域问题,不对啊,服务端已经允许跨域了。后来一查(IE8/9下的跨域资源请求),原来请求被IE8/9阻止了,所以服务端允许跨域了也没有用。当时网上有两种办法,1个是设置浏览器,允许通过域访问数据源。2个是加入一个js插件,也就是让IE8/9/10走IE自己支持的XDomainRequest发送请求。第一个方法只能玩玩,不可能让用户去操作套路那么深的步骤。第二个方法github上有两套js。
https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest
https://github.com/jaubourg/ajaxHooks/blob/master/src/xdr.js
引用后都不用改代码,刚开始还有点小激动。
<!--[if (IE 8)|(IE 9)]><script src="Js/jQuery.XDOmainRequest.js"></script><![endif]-->
加上去一看,请求发过去了,界面进入了正常流程。but,又发现返回的值不对,说与服务端,服务端说你的值没传过来,怎么可能,代码都没动,原来这个XDomainRequest是参数走的header,先天性缺少contentType,没有参数的请求返回是正确的,有参数的后台就没有读到。又寻思着难道要后台改代码,支持一下这种方式?我迟疑了。然后就到群里和队友们讨论下。大家给出