浏览器兼容性随手记: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">

 

 

 

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

posted @ 2014-12-09 22:49  李明夕  阅读(309)  评论(0编辑  收藏  举报