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

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

  • 相关阅读:
    对象进行比较
    java中length,length(),size()区别
    引用数据类型、自定义类
    java方法
    学员信息管理系统案例
    商品库存管理查看增减
    引用数据类型Scanner,Random
    Cantor表巧妙的做法
    UVA 11292 The dragon of Loowater勇士斗恶龙 11729 突击战 Commando War
    期末,祝不挂
  • 原文地址:https://www.cnblogs.com/limingxi/p/4154407.html
Copyright © 2020-2023  润新知