目前我们兼容到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。
- console
以前遇到IE9下面系统无法运行,但是打开控制台想要调试一下,看看问题在哪,居又能正常运行,这还怎么玩? 后来发现在IE9,8下面,有时候不打开控制台,console对象是不存在的,那么调用console.log就会报错导致js运行不下去,而一打开控制台console对象就存在了,又看不到bug所在了。
这个时候我们可能需要,不打开控制台的调试方法:github.com/liusaint/Ja…
另外线上环境尽量不要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。
又要功能强,又要兼容低,前端不好当啊。
先写到这里。