浏览器部分兼容性处理

发表于 | 分类于 ，
字数统计 933 | 阅读时长 4

H5新标签兼容

  • 在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，

  • 但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(‘tagName’)创建的自定义标签，

  • 于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(‘tagName’)来创建一遍，这样IE低版本也能正常解析HTML5新标签了，

  • 在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。html5shiv.js

    1
    2
    3
    4
    <!--[if lte IE 8]>
      <!--[if lte IE 8]>	
    	<script src='html5shiv.min.js'></script>
    <![endif]-->

JS兼容

节点相关

nextSibiling和childNodes的兼容性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getNextSibiling(ele) {
if (ele && ele.nextElementSibling) {
    return ele.nextElementSibling;
}
else {
    if (ele)
    {
        ele=ele.nextSibling;         //接收下一个
        while (ele.nodeType != 1)   //判断是否是一个标签,如果不是 那么以这个不是的为基础 再找下一个。
        {
            ele = ele.nextSibling;
        }
    }
    return ele;
}
}

childNodes和children

  • childNodes不仅能获取到子标签节点，还能获取嵌套在其中的文本节点、属性节点、和注释节点.<
  • 如果我们使用这个属性来获取子标签节点的话需要对获取到的节点进行过滤.在js中标签节点的节点类型值为”1”，通过这个类型值可以实现筛选.children属性只会获取子标签节点。所以比较常用。
    • children基本没有兼容性问题，但是在ie8下 children会抓取注释内容。这点可以忽略不计。

获取/设置标签内容

  • 主要根据浏览器对innerText和textContent进行兼容性封装

  • innerText是ie及谷歌还有高版本的火狐支持,低版本的火狐支持textContent但是ie8及之前的浏览器不支持。

    ​

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     function getText(ele){
    	 if (ele.innerText)
    {return ele.innerText;} 
     else {
          return ele.textContent;
          }
    }   
     function setText(ele, value) {
     if (typeof ele.innerText == "string") {
      ele.innerText = value;
      } else {
     ele.textContent = value;
    }
     }

获取标签元素的style属性

1
2
3
4
5
6
7
8
 function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }
    else {
        return getComputedStyle(obj, null)[attr];
    }
}

page、client、scroll兼容性封装

页面滚动座标

  • 页面滚动座标非常常用，但是有很大的兼容性问题，可以合写为

    ​

    1
    2
    3
    4
    5
    6
    7
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    function scroll() {
     	 return {
      scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
     scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
     }
     }

网页可视区宽高

  • 网页可视区宽高的兼容写法
    页面可视区宽高非常常用，但是有很大的兼容性问题，可以合写为

    1
    var clientWidth = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth|| 0;

获取页面坐标位置的封装

1
2
3
4
5
6
function page(e) {
return {
    pageX: e.pageX || e.clientX + document.documentElement.scrollLeft,
    pageY: e.pageY || e.clientY + document.documentElement.scrollTop,
	}
}

事件对象兼容

e = e || e.event

pageX / pageY 兼容性封装

1
2
3
4
5
6
function page(e) {
    return {
        pageX: e.pageX || e.clientX + document.documentElement.scrollLeft,
        pageY: e.pageY || e.clientY + document.docuemntElement.scrollTop,
    }
}

注册事件兼容性

  • addEventListener(type,listener,false); 同一事件源可以注册多个事件，高级浏览器支持的注册事件的方式
  • attachEvent(on+type,listener): 同一事件源可以注册多个事件，IE8及之前的浏览器支持的注册事件的方式

移除事件的三种方式及封装

  • On+type = null; 原始的方式

  • removeEventListener(type,listener,false); 高级浏览器

  • detachEvent(type,listener); IE8及之前的浏览器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function removeEventListener(obj,type,listener){
    //进行能力检测
    if(obj&&obj.removeEventListener){
        obj.removeEventListener(type,listener,false);
    }else if(obj&&obj.detachEvent){
        obj.detachEvent("on"+type,listener);
    }else {
        obj["on"+type]=null;
    }
    }

阻止事件冒泡

  • w3c的方法是event.stopPropagation() //高级浏览器支持

  • IE则是使用event.cancelBubble = true //IE8及以下

    1
    2
    3
    4
    5
    6
    7
    8
    if(event && event.stopPropagation)
    {
         event.stopPropagation();
     }
     else
     {
         event.cancelBubble = true;
     }

​


-------------本文结束感谢您的阅读-------------