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

最近做了一个需求，功能很简单，把用户的优惠券数量读取出来，然后显示到“用户中心”上。开发完成后，别的浏览器正常，但是到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可用。

版权声明：本文为博主原创文章，未经博主允许不得转载。