title: JavaScript兼容性
date: 2016-11-22 20:56:06
tags: JavaScript兼容性
categories: JS
常见JavaScript兼容性及解决方案：
1.选择器兼容性
getElementsByClassName (IE9以及以上支持）；
document.querySelector和document.querySelectorAll （IE8以及以上支持）
2.获取计算后的样式
getComputedStyle （IE9以及以上支持）；
currentStyle（所有IE都支持，它是一个属性）
兼容性处理：
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
3. trim()（IE9以及以上支持）
var str=' wendaoliu '; //去除首尾空格
//console.log(str.trim()); 用正则兼容性写法如下
String.prototype.trim=function(){
return this.replace(/^\s+|\s+$/g,'');
};
console.log(str.trim()); //wendaoliu
4.获取DOM节点
firstChild／firstElementChild
lastChild ／lastElementChild
nextSibling ／nextElementSibling
previousSibling ／previousElementSibling
以上方法都是兼容的，但是不同浏览器取到的结果不一样。IE8以下的非标准浏览器获取到的是标签节点，标准浏览器获取到的不一定是标签节点。
var box=document.getElementById("box");
alert(box.nextSibling.nodeName); //#text
5.滚动条距离
BOM属性:window.pageXOffset / window.pageYOffset （IE9以及以上支持）；
DOM属性:document.body.scrollTop （chrome从body身上获取）
document.documentElement.scrollTop （其它的浏览器从document身上去获取）
document.onclick=function(){
var top=document.documentElement.scrollTop||document.body.scrollTop;
alert(top)
}
6. event对象
IE9以及以上支持，IE6,7,8的事件对象是window身上的一个属性。
var ev=ev||window.event;
7. addEventListener
addEventListener——IE9以及以上支持;
attachEvent——IE678支持，但是它的事件名字参数要加on。
兼容性处理：封装函数
//绑定事件
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn);
}else{
obj.attachEvent('on'+type,fn);
}
};
//取消绑定
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn);
}else{
obj.detachEvent('on'+type,fn);
}
}
addEvent(box,'click',alertBox);
function alertBox(){
alert(1);
removeEvent(box,'click',alertBox);
}
8. 鼠标滚轮事件
mousewheel——IE/chrome支持
滚动的方向——event.wheelDelta
上：120（正数） 下：-120（负数）
DOMMouseScroll——FireFox支持（必须用addEventListener添加）
滚动的方向——event.detail
上：-3（负数） 下：3（正数）
兼容性处理：封装函数
function myScroll(obj,upFn,downFn){
obj.onmousewheel=fn;
obj.addEventListener('DOMMouseScroll',fn);
function fn(ev){
if(ev.wheelDelta>0 || ev.detail<0){
//这个条件成立，说明现在都是往上边滚动
upFn.call(obj,ev);
}else{
downFn.call(obj,ev);
}
ev.preventDefault();
return false;
};
}
9. Ajax
-
XMLHttpRequest对象的兼容 (IE6以下不兼容) ；
2.完成事件onreadystatechange、onload的兼容性
onreadystatechange： readyState的值发生改变时触发的事件，只要这个值有变化就会触发；
onload：所有请求成功完成后触发，此时readystate的值为4，IE678不支持
新的XMLHttpRequest不推荐用onreadystatechange，使用onload。
兼容方法：Ajax封装
注意：因为JSON对象是不兼容的，所以在引入封装好的Ajax之前，需要引入json2.js文件，保证JSON对象在所有平台的兼容。
function ajax(json){
var settings={
url:'',
method:'get',
data:{},
dataType:'json',
succ:function(){},
fail:function(){}
};//用户传的参数json[attr]覆盖默认参数settings[attr]
for(var attr in json){
settings[attr]=json[attr];
}
//把数据拼成正确的格式----需要传的数据格式
var arr=[];
for(var attr in settings.data){
arr.push(attr+'='+settings.data[attr]);
}
settings.data=arr.join('&');//声明一个ajax对象并坐兼容性处理
var ajax=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');//设置请求方式
if(settings.method.toLocaleLowerCase()==='get'){
ajax.open(settings.method,settings.url+'?'+settings.data+'&'+new Date().getTime(),true);
ajax.send();
}else{
ajax.open(settings.method,settings.url,true);
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(settings.data);
}//设置完成事件的兼容性
if(typeof ajax.onload==='undefined'){
ajax.onreadystatechange=ready;
}else{
ajax.onload=ready;
}function ready(){
if(ajax.readyState==4){
if(ajax.status==200){
switch(settings.dataType.toLocaleLowerCase()){
case 'string':
settings.succ(ajax.responseText);
break;case 'json': settings.succ(JSON.parse(ajax.responseText)); break; case 'xml': settings.succ(ajax.responseXML); } }else{ settings.fail(ajax.status); } }};
}
10. forEach()遍历数组（ IE9及以上能支持）
var color=['red','green','blue','yellow'];
color.forEach(function(value,index,array){
console.log(value,index,array);
});
var color=['red','green','blue','yellow'];
for(var i=0; i<color.length;i++){
console.log(color[i],i,color)
}