js中兼容性问题的封装(能力检测)

  所谓兼容性,就是看浏览器是否支持当前对象的属性或是方法,先通过获得页面文本内容的方式来了解兼容性,并封装函数或对象以解决此类问题。
获得页面文本内容的方式:innnerText 或textContent 或innerHTML。
innerText在不同浏览器存在有兼容性问题,为此我们需要封装到一个函数里,使得不同的浏览器及不同版本都能获得页面文本。(谷歌兼容性较好,这里只拿早期火狐版本和IE8及其之前版本作比较)

innerText和innerHTml的具体区别
  在获取页面文本的时候
1,innerText只会获取到标签之间的文本信息,不会获取到标签;innerHTML是获得标签之前的所有内容,包括标签本身
2,IE8及之前的版本是支持innerText的,早期的火狐浏览器是不支持的,早期的火狐只支持textContent,而IE8不支持;innerHTML是所有浏览器都支持的,不存在兼容性问题
  
/**
     * innerText  textContent
     * 获得页面标签之间文本内容的兼容性写法
     * @param obj
     * @returns {*}
     */
    function getInnerText(obj) {
        if (obj.innerText) { //IE8及之前的版本支持
            return obj.innerText;
        } else {
            return obj.textContent; //早期的火狐支持
        }
    }

  在设置页面文本的时候
1,innerText会把设置的文本内容原样输出;文本里即使有html标签,也不会渲染出来(发生了转义)
2,innerHTML会渲染出html标签的,无兼容性问题
  
/**
     * 设置页面标签之间文本内容的兼容性写法
     * @param obj
     * @param value
     */
    function setInnerText(obj, value) {
        if (obj.innerText) {
            obj.innerText = value;
        } else {
            obj.textContent = value;
        }
    }
  若有很多此类兼容性问题需要封装,可以统一把它们封装到一个对象里,如下
var txt = {
        getInnerText: function (obj) {
            if (obj.innerText) { //IE8及之前的版本支持
                return obj.innerText;
            } else {
                return obj.textContent; //早期的火狐支持
            }
        },
        setInnerText: function (obj, value) {
            if (obj.innerText) {
                obj.innerText = value;
            } else {
                obj.textContent = value;
            }
        }
    };

 

  再看一个小例子

  获得下一个兄弟元素节点的能力检测
nextSibling chrome,火狐都支持。但是会获得文本节点,IE8及之前版本会忽略空白文本节点
nextElementSibling chrome,火狐支持,IE8及之前版本不支持
/**
     * 取下一个兄弟元素节点
     * @param element
     * @returns {*}
     */
    function getNextElement(element) {
        if (element.nextElementSibling) {
            return element.nextElementSibling;
        } else {
            var node = element.nextSibling;
            while (node && node.nodeType != 1) {    //文本节点的节点值为1
                node = node.nextSibling;
            }
            return node;
        }
    }


以后的工作和学习中有许多兼容性的问题,多了解封装的思想和方法。

posted @ 2016-08-07 22:20  cnjs  阅读(1810)  评论(0编辑  收藏