title: JavaScript兼容性
date: 2016-11-22 20:56:06
tags: JavaScript兼容性
categories: JS

常見(jiàn)JavaScript兼容性及解決方案：

1.選擇器兼容性

getElementsByClassName (IE9以及以上支持）；
document.querySelector和document.querySelectorAll （IE8以及以上支持）

2.獲取計(jì)算后的樣式

getComputedStyle （IE9以及以上支持）；
currentStyle（所有IE都支持，它是一個(gè)屬性）
兼容性處理：
<pre>function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}</pre>

3. trim()（IE9以及以上支持）

<pre>var str=' wendaoliu '; //去除首尾空格
//console.log(str.trim()); 用正則兼容性寫法如下
String.prototype.trim=function(){
return this.replace(/^\s+|\s+$/g,'');
};
console.log(str.trim()); //wendaoliu</pre>

4.獲取DOM節(jié)點(diǎn)

firstChild／firstElementChild
lastChild ／lastElementChild
nextSibling ／nextElementSibling
previousSibling ／previousElementSibling
以上方法都是兼容的，但是不同瀏覽器取到的結(jié)果不一樣。IE8以下的非標(biāo)準(zhǔn)瀏覽器獲取到的是標(biāo)簽節(jié)點(diǎn)，標(biāo)準(zhǔn)瀏覽器獲取到的不一定是標(biāo)簽節(jié)點(diǎn)。
<pre>var box=document.getElementById("box");
alert(box.nextSibling.nodeName); //#text</pre>

5.滾動(dòng)條距離

BOM屬性:window.pageXOffset / window.pageYOffset （IE9以及以上支持）；
DOM屬性:document.body.scrollTop （chrome從body身上獲?。?br> document.documentElement.scrollTop （其它的瀏覽器從document身上去獲?。?br> <pre>document.onclick=function(){
var top=document.documentElement.scrollTop||document.body.scrollTop;
alert(top)
}</pre>

6. event對(duì)象

IE9以及以上支持，IE6,7,8的事件對(duì)象是window身上的一個(gè)屬性。
<pre>var ev=ev||window.event;</pre>

7. addEventListener

addEventListener——IE9以及以上支持;
attachEvent——IE678支持，但是它的事件名字參數(shù)要加on。
兼容性處理：封裝函數(shù)
<pre>//綁定事件
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);
}</pre>

8. 鼠標(biāo)滾輪事件

mousewheel——IE/chrome支持
滾動(dòng)的方向——event.wheelDelta
上：120（正數(shù)） 下：-120（負(fù)數(shù)）
DOMMouseScroll——FireFox支持（必須用addEventListener添加）
滾動(dòng)的方向——event.detail
上：-3（負(fù)數(shù)） 下：3（正數(shù)）
兼容性處理：封裝函數(shù)
<pre>function myScroll(obj,upFn,downFn){
obj.onmousewheel=fn;
obj.addEventListener('DOMMouseScroll',fn);

            function fn(ev){
                if(ev.wheelDelta>0 || ev.detail<0){
                //這個(gè)條件成立，說(shuō)明現(xiàn)在都是往上邊滾動(dòng)
                    upFn.call(obj,ev);
                }else{
                    downFn.call(obj,ev);
                }
                ev.preventDefault();
                return false;
            };
        }</pre>     

9. Ajax

1. XMLHttpRequest對(duì)象的兼容 (IE6以下不兼容) ；
   2.完成事件onreadystatechange、onload的兼容性
   onreadystatechange： readyState的值發(fā)生改變時(shí)觸發(fā)的事件，只要這個(gè)值有變化就會(huì)觸發(fā)；
   onload：所有請(qǐng)求成功完成后觸發(fā)，此時(shí)readystate的值為4，IE678不支持
   新的XMLHttpRequest不推薦用onreadystatechange，使用onload。
   兼容方法：Ajax封裝
   注意：因?yàn)镴SON對(duì)象是不兼容的，所以在引入封裝好的Ajax之前，需要引入json2.js文件，保證JSON對(duì)象在所有平臺(tái)的兼容。
   <pre><script src="js/json2.js"></script>
   <script src="js/ajax.js"></script></pre><pre>
   function ajax(json){
   var settings={
   url:'',
   method:'get',
   data:{},
   dataType:'json',
   succ:function(){},
   fail:function(){}
   };

   //用戶傳的參數(shù)json[attr]覆蓋默認(rèn)參數(shù)settings[attr]
   for(var attr in json){
   settings[attr]=json[attr];
   }
   //把數(shù)據(jù)拼成正確的格式----需要傳的數(shù)據(jù)格式
   var arr=[];
   for(var attr in settings.data){
   arr.push(attr+'='+settings.data[attr]);
   }
   settings.data=arr.join('&');

   //聲明一個(gè)ajax對(duì)象并坐兼容性處理
   var ajax=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');

   //設(shè)置請(qǐng)求方式
   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);
   }

   //設(shè)置完成事件的兼容性
   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);
        }
    }
   

   };
   }
   </pre>

10. forEach()遍歷數(shù)組（ IE9及以上能支持）

<pre>var color=['red','green','blue','yellow'];
color.forEach(function(value,index,array){
console.log(value,index,array);
});</pre>
<pre>var color=['red','green','blue','yellow'];
for(var i=0; i<color.length;i++){
console.log(color[i],i,color)
}</pre>