如何处理使用js兼容所有浏览器的问题

Posted 放咩咩的星星

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何处理使用js兼容所有浏览器的问题相关的知识,希望对你有一定的参考价值。

首先:如何处理兼容问题

1.如果两个都是属性,用逻辑||做兼容

2.如果有一个是方法,用三元做兼容

3.如果是多个属性或方法,封装函数做兼容

 

分享两个小知识点:

1、取消拖拽的默认行为:

document.ondragstart = function(){

  return false

}

2、阻止右键菜单的默认行为:

document.oncontextmenu = function(){

  return false

}

 

开始兼容问题:

一、运用逻辑运算符||做的相关兼容

1、关于获取滚动高度的不兼容问题

var scrollTop=documentElement.scrollTop

var scrollTop=document.body.scrollTop(chrome写法)

兼容写法:

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop

 

2、关于获取事件对象的兼容:

function (eve){

  var e = eve || window.event

}

 

3、获取键盘编码的兼容:

function (eve){

  var e = eve || window.event

  var keyValue = e.keyCode || e.charCode || e.which

}

 

4、关于事件委托获取事件源的兼容问题:

function (eve){

  var e = eve || window.event

  var target = e.target || e.srcElement

}

 

二、运用三元表达式做的兼容

1、阻止事件冒泡的兼容

function (eve){

  var e = eve || window.event

  e.stopPropagation ? e.stopPropagation : e.cancleBubble = true;

}

 

2、阻止超链接的默认行为:

oA.onclick = function (eve){

  var e = eve || window.event

  e.preventDefault ? e.preventDefault() : e.returnValue = false

}

三、运用方法进行兼容的问题:

1、添加事件监听:

function addEventListener(obj,event,fn,boo){

    if(obj.addEventListener){

              obj.addEventListener(event,fn,boo);

     }else{

    obj.attachEvent("on" + event,fn);

  }

}

运用:

                  addEventListener(oBtn,"click",fn1,false);

                  addEventListener(oBtn,"click",fn2,false);

                  addEventListener(oBtn,"click",fn3,false);

2、移除事件监听:

function removeEventListener(obj,evt,fn,boo){

   if(obj.removeEventListener){

    obj.removeEventListener(evt,fn,boo);

   }else{

    obj.detachEvent("on" + evt,fn);

  }

}

 removeEventListener(oBtn,"click",fn2,false);

 

3、获取鼠标键值的兼容:(event.button)

function getbutton(eve){

  var e = eve || window.event;

  if(eve){//判断是否为标准浏览器

  return e.button

}else if(window.event){//判断是不是IE

switch(e.button){

      case 1 :  return 0;

      case 4 :  return 1;

      case 2 :  return 2;

}}}

 

二:关于使用getAttribute获取className不兼容的问题

<div id="box1"></div>

var oBox=document.getElementById("box1")

  (1)console.log(oBox.getAttribute("className"))//标准浏览器不支持,ie7支持

 (2)console.log(oBox.getAttribute("class")//标准浏览器支持,ie7不支持

        兼容写法:

function fn(obj){

  if(obj.getAttribute("class"))==null{

  return obj.getAttribute("className");

}else{

  return obj.getAttribute("class")

}

};

 

三:关于getElementsByClassName("class属性名称")的不兼容问题;

console.log(obj.getElementsByClassName("class属性名称"))//标准浏览器支持,ie8以下不支持

      兼容写法:

function fn(obj.class属性名称){

   if(obj.getElementsByClassName){

      return   obj.getElementsByClassName(className);

      }else{

var list = [];

var arr = obj.getElementsByTagName(*)//上一步是获取页面所有的标签元素

for(var i = 0;i < arr.length;i ++){

      if(arr[i].className == className){

      list.push(arr[i]);

}

}

      return list;}}

遍历所有元素,找出class名为指定名字的元素

 

四: 关于处理空白文本节点的问题

1.忽略空白文本节点

function fn(nodes){

      var arr = [];

  for(var i = 0;i < nodes.length;i ++){

      if(nodes[i].nodeType === 3 &&

/^\s+$/.test(nodes[i].nodeValue)){

      continue;

        }else{

      arr.push(nodes[i]);

}}    return arr;}

 

2.删除空白文本节点:

function fn(nodes){//nodes;所有的子节点

   for(var i = 0;i < nodes.length;i ++){

   if(nodes[i].nodeType === 3 &&

/^\s+$/.test(nodes[i].nodeValue)){

      nodes[i].parentNode.removeChild(nodes[i]);}}

      return nodes

}

 

3.移除空白节点

function fn(node){//node:父节点

  var childs = node.childnodes;//获取所有子节点

 for(var i = 0;i < childs.length;i ++){

 if(childs[i].nodeType === 3 &&

/^\s+$/.test(childs[i].nodeValue)){

                                 node.removeChild(childs[i]);}}

      return node;

}

 

五:获取非行内样式的兼容写法

function getStyle(obj,attr){

return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];

            }

attr:是属性;比如

<style>#box{width:100px;}</style>

<div id = box></div>

<script>

var oBox = document.getElementById("box");

function getStyle(obj,attr){

                                    return obj.currentStyle ?       obj.currentStyle[attr] :      getComputedStyle(obj,true[attr];

                        };

      var s = getStyle(oBox,"width");

      alert(s);

</script>

 

以上是关于如何处理使用js兼容所有浏览器的问题的主要内容,如果未能解决你的问题,请参考以下文章

前端干货--如何处理浏览器兼容性

如何处理前端js跨域问题

html5都有哪些新特性,移除了那些元素?如何处理html5新标签的浏览器兼容问题?

html5有哪些新特性移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分HTML和HTML5?

iOS Web App - 如何处理过度的应用缓存?