对于一个IE8兼容性问题的反思

淩亂°似流年 2022-08-02 13:50 246阅读 0赞

最近做了一个需求，功能很简单，把用户的优惠券数量读取出来，然后显示到“用户中心”上。开发完成后，别的浏览器正常，但是到IE8上就不行了。而且，按下F12之后，就又可以加载出来了。

首先，找了前端人员，看了看，没有找到原因，她怀疑是脚本冲突，不过忙了半天，还是没有搞定。

其次，换浏览器，来回折腾。

最后，思考了一下，在加这个功能之前，数据也是那样子读取的，用ajax请求后台数据，然后写入到页面的指定标签中，那么为何自己加了一个类似的数据 就不行了呢？ 于是，alert了前后的参数。最后发现，在迭代的那一步，alert失效了。但是在console.log()代码之前，是可以的，会不会是这个函数的影响呢？果不其然，去掉console.log()之后，恢复了正常！

代码如下：

$(document).ready(function(){
    				$.ajax({ url: "/ucenter/getAccountByUserId.action", type: "POST",
    					success : function(data) {
    						var json = eval('(' + data + ')');
    						 $.each(json, function (key, value) {
    							if(data != "" && data != null){
    								$("#em_account").html("¥" + (value.account).toFixed(2));
    								$("#em_backCount").html("¥" + (value.backCount).toFixed(2));
    								$("#em_freezeBackCount").html("¥" + (value.freezeBackCount).toFixed(2));
    								$("#em_freezeAccount").html("¥" + (value.freezeAccount).toFixed(2));
    								// 设置优惠券数量
    								var couponStr = "";
    								// IE8 不支持！ console.log("[debug]couponCount : " + value.couponCount);
    								if(value.couponCount > 0){
    									couponStr = "<a href='/ucenter/queryCoupon.action' style='color:#DD4F11'>"+value.couponCount+"</a>";
    								}else{
    									couponStr = value.couponCount;
    								}
    								$("#em_couponCount").html(couponStr);
    							}
    						 });
    					}
    				});
    			});

感悟：碰到异常，要理清思路之后，再去采取行动。既然以前的几个数据，都是用同样的方式读取的，那为何自己加了一个就不行了呢？除了加了类似的代码，还加了什么代码呢？ 不就是console.log()吗？很好定位的一个思维方式，却折腾了那么久，太不应该了。

注：IE8/IE9要先按F12开启IE Dev Tools才能存取console物件。  
如果使用环境包含IE8/9，请养成良好习惯，用if (window.console) \{ ... \}包住console.log()动作，切忌把IE8/9想成Chrome/Firefox，以为永远有window.console可用。