JS跨浏览器兼容，一点点总结

不同的浏览器，对不同的/相同的属性、方法等的支持程度也会有所差别，要想达到满意的效果，需要做一些处理、给不同的浏览器量体裁衣，也就是所说的达到兼容。
常见的处理方式：（能力检测和浏览器检测）
1、三目运算式
typeof A=='B'?A:C
浏览器的类型A是B吗，是的话就用A，否则就用C。
2、逻辑或（没有1可靠）
var A=B||C
浏览器存在B或C其一，或者都存在。都存在默认用B。
3、检测浏览器引擎和版本号
BrowserDetect.browser == 'Internet Explorer' && BrowserDetect.version <= 7
根据不同的浏览器做不同的方案处理。
上栗子

1、获取窗口相对于屏幕左边和上边的位置

var leftPos=(typeof window.screenLeft=='number')?window.screenLeft:window.screenX;var topPros=(typeof window.screenTop=='number')?window.screenTop:window.screenY;

IE、Safari、Opera 和Chrome 都提供screenLeft 和screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX 和screenY 属性中提供相同的窗口位置信息，Safari 和Chrome 也同时支持这两个属性。但是不建议在Opera中使用screenX 和screenY。
在IE、Opera 中，screenLeft 和screenTop 中保存的是从屏幕左边和上边到由window 对象表示的页面可见区域的距离（包括工具栏），而在Chrome、Firefox 和Safari 中，screenY 或screenTop中保存的是整个浏览器窗口相对于屏幕的坐标值，即在窗口的y 轴坐标为0 时返回0。

2、跨浏览器获取页面视口的大小。

outerWidth 和outerHeight返回浏览器窗口本身的尺寸大小。而innerWidth 和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）。

document.documentElement.clientWidth 和
document.documentElement.clientHeight 中保存了页面视口的信息。在IE6中，这些属性在标准模式（document.compatMode == "CSS1Compat"）下才有效，在混杂模式（document.compatMode == "BackCompat"）下必须通document.body.clientWidth和document.body.clientHeight来获取

var pageWidth=window.innerWidth,
    pageHeight=window.innerHeight;if(typeof pageWidth!='number'){  if(document.compatMode=='CSS1ompat'){
    pageWidth=document.documentElement.clientWidth;
    pageHeight=document.documentElement.clientHeight;
  }else{
     pageWidth=document.body.clientWidth;
    pageHeight=document.body.clientHeight;
  }
}

3、浏览器兼容getElementsByClassName()方法

/**
 * @param {obj,dom树中搜索的起点,结果不包含该节点} node
 * @param {string,要获取的类名} classname
 * @return {list列表,带有classname的元素}
 *不适用于多个类名
 */function getElementsByClassName(node,classname){    if(node.getElementsByClassName){        return node.getElementsByClassName(classname);
    }else{        var results=[],
            elems=node.getElementsByTagName('*');//获取该节点下的所有元素节点
            console.log(elems)        for(var i=0;i<elems.length;i++){            if(elems[i].className.indexOf(classname)!=-1){
                results[results.length]=elems[i];
            }
        }        return results;
    }
}

4、关于ajax

• 获取请求对象

function getHTTPObject(){    if(typeof XMLHttpRequest=='undefined'){
        XMLHttpRequest=function(){//ie低版本
            try{return new ActiveXObject('Msxml2.XMLHTTP.6.0');}                catch(e){}            try{return new ActiveXObject('Msxml2.XMLHTTP.3.0');}                catch(e){}            try{return new ActiveXObject('Msxml2.XMLHTTP');}                catch(e){}            return false;
        }
    }    return new XMLHttpRequest();
}

• 获取响应

function getNewContent(){    var request=getHTTPObject();    if(request){
        request.open('GET','url.txt',true);//异步get请求
        request.onreadystatechange=funciton(){//服务器返回响应时触发该函数
            if(request.readyState==4){//4表示完成，0表示初始化，1表示加载，2表示加载完成，3表示正在交互
                var para=document.createElement('p');                var text=document.createTextNode(request.responseText);//创建的文本节点就是返回的响应数据
                para.appendChild(text);                console.log(para);
            }
        };
        request.send(null);//get请求把发送的数据放到url上，post请求放到send上
    }else{
        alert('your browser do not support XMLHttpRequest');
    }
}

作者：fenerchen
链接：https://www.jianshu.com/p/d830d08ac9d8