浏览器兼容性随手记：Javascript

1.event

　　IE9如下不支持直接获取event对象，因此须要写兼容：

　　　　var event = event?event:window.event;

　　IE8如下不支持event.target,可是能够经过event.srcElement来兼容:

　　　　var eventTarget = event.srcElement?event.srcElement:event.target;

2.document.getElementsByClassName("...")

　　IE8如下不支持，暂时没有解决办法；只能针对当前代码作Hack

3.new Date( str )格式错误

　　若是str不是标准的时间格式"2014/12/9"之类的字符串，new Date会失败并返回一个错误结果；

　　在Chrome下返回的是Invalid Date，在IE下返回的是NaN；

　　在作错误结果处理时，记得带上NaN

4.getYear 获取年份

　　在IE中拿到的是正常的2014,2013数值，而在Chrome等浏览器里拿到的是114,113，比正常年份少了个1900；获取完全年份应该使用getFullYear()函数，在各个浏览器内拿到的都是201四、2013等正常的年份数值　

5.stopPropagation 阻止冒泡

　　IE9一下不支持使用event.stopPropagation()函数，应使用event.cancelBubble = true;

　　　　var e = event?event:window.event;
　　　　if (e.stopPropagation) {
　　　　　　e.stopPropagation();
　　　　}
　　　　else{
　　　　　　e.cancelBubble = true;
　　　　}

6.setAttribute函数

　　节点能够调用setAttribute函数来设置属性，可是ie7如下不支持经过该函数添加：class,cellspacing,cellpadding,onclick等

　　若是直接用setAttribute,那么在ie7中新建的节点就没有样式且绑定事件失效。

　　解决办法是直接经过属性进行赋值：(高级浏览器已向下兼容)

　　　　node.className = "lee_calender";

　　　　tableNode.cellSpacing = 0;

　　　　tableNode.cellPadding = 0;

　　点击事件的话，仍是直接用addEventListener来绑定吧，可是要注意看下一条

7.addEventListener("click",function(){......})函数　　

 　　该函数在ie6,7下失效，ie6,7应使用attachEvent函数，而且绑定事件为"onclick","onmouseover" 等

　　不妨写一个兼容函数

　　function bindEvent(obj,eve,method){

　　　　if(obj.addEventListener){

　　　　　　obj.addEventListener(eve,method);

　　　　}

　　　　else{

　　　　　　eve = "on"+eve;

　　　　　　obj.attachEvent(eve,method);

　　　　}

　　}

　　调用时，直接bindEvent(document.getElementById("INPUT"),"click",function(){.......}); 　　

8.console.log()

　　console.log()函数在ie7,8下不能直接调用，ie7,8默认console是未初始化的

　　因此版本发布以前记得用grunt对js文件进行压缩，删除这些测试时写的console.log

9.ajax相关

　＊在ajax中，IE6如下不支持new XMLHttpRequest()。

　　兼容性的类为new ActiveXObject("Microsoft.XMLHTTP"); 

　＊IE浏览器中还存在ajax缓存的问题，能够经过如下办法：服务端在header设置cache:no-cache;前端ajax请求是能够在url后拼接时间戳；jQuery$.ajax中缓存可控

 10.移动端浏览器全屏

UC:
　　<meta name="full-screen" content="yes">
　　<meta name="browsermode" content="application">
QQ:
　　<meta name="x5-orientation" content="portrait">
　　<meta name="x5-fullscreen" content="true">
　　<meta name="x5-page-mode" content="app">

 

 

 

---遇到一些更一些，该好好记下浏览器兼容性及解决办法的知识点了-----