浏览器兼容性指南-优快云博客

总结了一些关于浏览器兼容性的问题供参考

1.在IE6/7/8下

Object.prototype.toString.apply(null) 返回"[object Object]" Object.prototype.toString.apply(undefined) 同样返回"[object Object]"

2.IE8以下 JSON是不存在的

解决方法

var str = '{"a":100}'

// 1. JSON.parse : 将JSON格式的字符串转成JSON格式的对象

/*var o = JSON.parse(str);
    o.a=200;//{"a":200}
    console.log(o.a);
    console.log(JSON);*/
    
//在IE8以下，JSON是不存在的
console.log(eval("("+str+")"))
复制代码

3.获取上一个哥哥元素节点，兼容所有浏览器

 function getBrother(curEle) {
 
        var pre = curEle.previousSibling;
        
        while(pre)
        
        {
            if(pre.nodeType===1){
                return pre;
            }
            
            pre = pre.previousSibling;
            
            // pre等于哥哥节点的哥哥节点；
        }
    }
复制代码

4.bind传参的方式和call方法一样； IE8以下不兼容

Function.prototype.myBind = function () {
        // this--> fn;
        var  that = this;
        // 如果myBind有第一个参数，那么指向第一个参数，没有指向window；
        var  arg = arguments[0]||window;
        // 截图arguments中从索引1开始之后的项
        var ary1 = [].slice.call(arguments,1)
        return function () {
            // 类数组转数组
            var ary2 = [].slice.call(arguments);
            // apply 可以传数组，concat将数组连接在一起；
            that.apply(arg,ary1.concat(ary2));
        }
    }

复制代码

5.低版本ie获取可视区域宽高

var winW=document.body.clientWidth

var winH=document.body.clientHeight
复制代码

6.兼容浏览器获取可视区域的方法

document.documentElement.clientWidth||docuemnt.body.clientWidth

document.documentElement.clientHeight||docuemnt.body.clientHeight
复制代码

Ie8以下不兼容，window中没有getComputedStyle这个方法

解决方法

元素.currentStyle.属性名 //兼容IE所有浏览器
//只能Ie使用
复制代码

通过类名（getElementsByClassName）IE8以及以前版本不兼容

解决方法：

function getClassNames(classStr,tagName){
        if (document.getElementsByClassName) {
            return document.getElementsByClassName(classStr)
        }else {
        var nodes = document.getElementsByTagName(tagName),ret = []; 
        for(i = 0; i < nodes.length; i++) {
         if(hasClass(nodes[i],classStr)){
           ret.push(nodes[i])
            }
                }
            return ret;
        }
    }
    function hasClass(tagStr,classStr){
    var arr=tagStr.className.split(/\s+/ ); //这个正则表达式是因为class可以有多个,判断是否包含
        for (var i=0;i<arr.length;i++){
            if (arr[i]==classStr){
                return true ;
            }
    }
        return false ;
    }
复制代码

IE8及IE8以下没有addEventListener()

解决方法：

//ie支持
attachEvent("onclick",fn)
//事件需加上on
复制代码

注意：

attachEvent绑定的事件方法顺序是倒序的
重复绑定的问题：可以给同一个元素的同一个事件绑定相同的方法
IE8以上既有addEventListener又有attachEvent
函数方法中的this指向window，不指向被绑定的那个元素

box.attachEvent("onclick",fn);
box.attachEvent("onclick",fn);
复制代码

IE8以下没有事件对象

box.onclick=function(e){
    
}
console.log(e) //ie下undefined
复制代码

解决方法：

IE8及IE8以下可输出

console.log(window.event);
e=e||window.event;
复制代码

注意：IE8以下

1. 事件对象里没有pageX

box.onclick = function (e) {
    e = e || window.event;
    e.pageX = e.pageX || e.clientX + document.documentElement.scrollLeft;
        }
复制代码

2. 事件对象里没有pageY

 box.onclick = function (e) {
        e = e || window.event;
        e.pageY = e.pageY || e.clientY + document.documentElement.scrollTop;
        }
复制代码

3. 事件对象里没有target

box.onclick = function (e) {
e.target = e.target || e.srcElement;
        e = e || window.event;
        }
复制代码

IE8没法阻止事件默认行为

无法使用事件对象里的preventDefault( )
可以更改returnValue的属性值为false，同样可以阻止事件默认行为

//兼容浏览器

元素.onclick = function(e){
        e = e || window.event;
        e.preventDefault = e.preventDefault || function () {
            e.returnValue=false;
        }
        console.log(e);
复制代码

IE8没法阻止事件冒泡传播

无法使用e.stopPropagation( )

阻止事件的冒泡传播: e.stopPropagation()

解决方法：

//IE8及以下就没有这个e

元素.onclick = function (e) {
        e = e || window.event;
        e.stopPropagation = e.stopPropagation || function () {
            e.cancelBubble=true;
        }
        e.stopPropagation();
        console.log("center")
    }
复制代码

在火狐和IE下，使用setCapture( )可以让鼠标和盒子绑定在一起防止鼠标丢失

注意：

要解绑(不然点上就出不来了)！
谷歌及其他浏览器不能使用！

function up() {
        if(this.setCapture){
            // releaseCapture ： 解绑元素的事件和鼠标的关系；
            this.releaseCapture();
            this.onmousemove=null;
            this.onmouseup=null;
        }else{
            document.body.onmousemove = null;
            document.body.onmouseup = null;
        }

    }
复制代码

Array.forEach()兼容

forEach在ie8中不兼容，重写该方法

 if ( !Array.prototype.forEach ) {
        Array.prototype.forEach = function forEach( callback, thisArg ) {
            var T, k;
            if ( this == null ) {
                throw new TypeError( "this is null or not defined" );
            }
            var O = Object(this);
            var len = O.length >>> 0;
            if ( typeof callback !== "function" ) {
                throw new TypeError( callback + " is not a function" );
            }
            if ( arguments.length > 1 ) {
                T = thisArg;
            }
            k = 0;
            while( k < len ) {

                var kValue;
                if ( k in O ) {
                    kValue = O[ k ];
                    callback.call( T, kValue, k, O );
                }
                k++;
            }
        };
    }
复制代码