javascript的兼容问题

2023年6月6日 132次阅读 来源: 666888

我们在写javascript的时刻会碰见许多兼容问题，大部分是ie9以下浏览器和其他浏览器的区分。下面整顿每次碰见的兼容问题。
我们常运用的兼容要领是if或许||标记

1、addEventListener和attachEvent 事宜绑定

<!DOCTYPE html>
<html>
  <head>
    <title>事宜绑定</title>
    <script>
      window.onload=function(){
        var oBtn=document.getElementById("btn1");
        if(oBtn.attachEvent){
          oBtn.attachEvent("onclick",function(){
            alert("a");
          });
          oBtn.attachEvent("onclick",function(){
            alert("b");
          });
        }else{
          oBtn.addEventListener("click",function(){
            alert("a")
          },false);
          oBtn.addEventListener("click",function(){
            alert("b")
          },false);
        }
      }
    </script>
  </head>
  <body>
    <input id="btn1" type="button" value="按钮">
  </body>
</html>

如许每次写的时刻比较贫苦，我们能够把这个兼容性封装下，代码以下：

<!DOCTYPE html>
<html>
  <head>
    <title>事宜绑定封装</title>
    <script>
      function myAddEvent(obj,ev,fn){//obj代表绑定事宜的元素，ev代表事宜（比方click），fn代表实行的函数
        if(obj.attachEvent){
          obj.attachEvent("on"+ev,fn);
        }else{
          obj.addEventListener(ev,fn,false);
        }
      }
      window.onload=function(){
        var oBtn=document.getElementById("btn1");
        myAddEvent(oBtn,"click",function(){
          alert("a");
        });
        myAddEvent(oBtn,"click",function(){
          alert("b");
        });
      }
    </script>
  </head>
  <body>
    <input id="btn1" type="button" value="按钮">
  </body>
</html>

2、removeEventListener和detachEvent 删除事宜

3、ev和event

示例：

<!DOCTYPE html>
<html>
  <head>
    <title>event兼容测试</title>
    <script>
      window.onload=function(){
        // document.onclick=function(ev){
        //   var oEvent=ev || event;
        //   console.log(oEvent);
        // }
        document.onclick=function(event){
          var oEvent=event || window.event;
          console.log(oEvent);
        }
      }
    </script>
  </head>
  <body>
  </body>
</html>

4、currentStyle(ie)和getComputedStyle(非ie)猎取元素的当前款式封装

<!DOCTYPE html>
<html>
<head>
  <title>猎取款式兼容写法</title>
  <script>
    function getStyle(obj,name){
      if(obj.currentStyle){
        return obj.currentStyle[name];
      }else{
        return getComputedStyle(obj)[name];
      }
    }
    window.onload=function(){
      oDiv=document.getElementById("div1");
      // alert(getStyle(oDiv,"width"));
      alert(getStyle(oDiv,"background"));
      // alert(getStyle(oDiv,"backgroundColor"))
    }
  </script>
</head>
<body>
  <div id="div1" style="width:100px; height:100px; background:#f00;"></div>
</body>
</html>

5、new XMLHttpRequest()和new ActiveXObject(“Microsoft.XMLHTTP”)封装一个get要求

function ajax(url,fnSucc,fnFaild){
  // 第一步：建立ajax对象
  if(window.XMLHttpRequest){
    var oAjax=new XMLHttpRequest();
  }else{
    var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
  }
  // 第二步：链接服务器
  // open(要领，文件名即地点，异步传输)
  oAjax.open("GET",url,true);
  // 第三步：发送要求
  oAjax.send();
  // 第四步：吸收返回
  oAjax.onreadystatechange=function(){
    if(oAjax.readyState===4){//推断浏览器和服务器进行到哪一步了。4代表读取编译完成
      if(oAjax.status===200){//胜利
        fnSucc(oAjax.responseText);//把胜利效果传递给胜利函数
      }else{
        if(fnFaild){
          fnFaild(oAjax.status);//把毛病状况码传递给失利函数
        }
      }
    }
  }
}

挪用

ajax("a.txt",function(str){
  alert(str);
},function(error){
  alert(error);
})
    原文作者：666888
    原文地址: https://segmentfault.com/a/1190000016122161
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞