浏览器兼容性随手记: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()函数,在各个浏览器内拿到的都是2014、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">
---遇到一些更一些,该好好记下浏览器兼容性及解决办法的知识点了-----