IE踩坑记

[liusaint]

目前我们兼容到IE9,在系统的时候会遇到一些坑。这里稍稍记录一下。

• disabled属性

给一些非表单节点加上了disabled属性，在IE9下，样式也会发生变化。

• type属性

常常顺手给dom节点，比如按钮上加一个type="1",type="2"这样子，在chrome下运行得好好的，结果到ie9下面getAttribute('type')或$(..).attr('type')运行不正常，调试发现读出来的type都是'submit'

• event = window.event || event

最近跟踪一个bug，event中的某些属性读取不到，发现问题出在这句代码上。当代码执行过去之后，window.event可能已经变了。
所以应该改写成:event || window.event。

这种的选择判断，理论上都应该以高级优先原则。 先看看功能强大 的存不存在，然后再考虑低级一点的。 因为有些浏览器可能是高级与低级并存的。
比如document.addEventListener与document.attachEvent。

• IE9　表格错位。

可能是因为td之间有换行。

• console

以前遇到IE9下面系统无法运行，但是打开控制台想要调试一下，看看问题在哪，居又能正常运行，这还怎么玩？ 后来发现在IE9,8下面，有时候不打开控制台，console对象是不存在的，那么调用console.log就会报错导致js运行不下去，而一打开控制台console对象就存在了，又看不到bug所在了。

这个时候我们可能需要，不打开控制台的调试方法：#4

另外线上环境尽量不要console.log东西出来。可考虑将原生console.log封装一下：

function log(){
	if('dev' == window.environment){
		console.log.apply(console,arguments);
	}	
}
log(1,2);//1,2

这样正式环境也不会有输出。另外，为了预防其他同事潜在的console.log输出。可以增加以下保险代码。当然，实际可能还有console下面的其它方法也要做处理。

if(!window.console){
	window.console = {};
	window.console.log = function(){

	}
}

• IE9不支持flex

• IE9不支持FileReader

• a标签触发onbeforeunload事件

这个情况也不是常常会出现，要看概率。我们的a标签即使加了javascript:void:(0)也触发了绑定的window.onbeforeunload方案，然而页面其实并不会跳转。
一般考虑解决办法是给所有的a标签代理一下，检测到href为javascript时，阻止默认事件，event.preventdefault();但是实际并不是么有效果，特别是后面添加上去的a标签。比如生成的ajax分页的a标签，连jQuery的on方法代理都没什么效果。只有每次生成分页的a标签后都给它们单独绑一个click事件来阻止默认操作event.preventdefault();

• IE9 canvas跨域问题 如：canvas.toDataURL()

我们常常会遇到图片所在的域跟网页的域不一样的情况。那么使用canvas的一些方法提取编辑过的图片数据的时候就会遇到跨域的问题。比如canvas的toDataURL()方法。其他浏览器可以通过服务器配置CORS跨域加上 img.crossOrigin="anonymous"来解决问题，但IE9不行， 所以一些功能在IE9下面就需要后端来做，比如图片的旋转，在IE9下还是乖乖地传个角度给后端吧。或者在IE9下面直接舍弃部分功能。

• localStorage 深坑

说出来你可能不信，localStorage在IE偶尔抽风的情况下会出现，两个标签页，完全一样的网址，读出来的localStorage不一样的情况。（页面经过反复刷新，请不要怀疑我的操作。） 因为最近做的项目对缓存要求很高，对localStorage有大量的运用，然后产生了一些奇怪的bug，才发现了这个深坑。 许多多年经验的同事都表示从来没遇到过这样诡异的bug。
又要功能强，又要兼容低，前端不好当啊。

先写到这里。