聊聊一直困擾前端程序員的瀏覽器兼容-【JavaScript】

　　上篇已經寫過瀏覽器的兼容發展歷史以及主流瀏覽器，主要的css兼容我知道的已所有寫到，這篇這篇專攻javascript的兼容。

一、getYear()方法

var year = new Date().getYear();
document.write(year);

  在IE中獲得的日期是「2016」，在Firefox中看到的日期是「116」,主要是由於在 Firefox 裏面 getYear() 返回的是 "當前年份-1900" 的值。

因此，通常用getFullYear( )方法獲取年份。

二、自定義屬性問題

 

IE8及如下版本，能夠經過能夠使用獲取常規屬性的方法來獲取HTML中的自定義屬性；
標準的瀏覽器，是不能直接獲取自定義屬性。
解決方法：統一經過 getAttribute() 獲取自定義屬性。 

 

3. 用getAttribute()的方法獲取元素的class名

getAttribute(「class」); //IE7及如下版本不支持該方法，而且在瀏覽器中的返回值爲null，其餘瀏覽器支持該方法；
getAttribute(「className」); // IE7及如下版本支持該方法，其餘瀏覽器不支持

解決方法：

obj.getAttribute('class') === null ? obj.getAttribute('className')  : obj.getAttribute('class') //來他個判斷

四、獲取css的屬性方法

element.style.attr; //只能獲取行內樣式表裏的屬性；
element.currentStyle.attr; //IE瀏覽器支持該方法；
getComputedStyle(element).attr; //IE瀏覽器不支持，其餘瀏覽器支持。

//解決：繼續判斷

element.currentStyle ？element.currentStyle[attr] : getComputedStyle(element)[attr]

　　

五、空白文本節點

在標準瀏覽器下，用childNodes獲取子節點，會把換行和空白字符都算做父節點的子節點，而在IE8及如下版本的瀏覽器childNodes不會。

六、window.eventw問題

window.event 能在IE或是在早期版本的谷歌瀏覽器下運行，而不能在Firefox下運行，這是由於Firefox的event對象只能在事件發生的現場使用，Firefox必須從源處加入event做參數傳遞。IE忽略該參數，用window.event來讀取該event。

解決：

document.onclick = function (evt){
    var e = evt || wondow.event;  
}

七、鼠標按鍵（event對象的button屬性）

標準瀏覽器中：
0——表明按下鼠標左鍵；
1——表明按下鼠標滾輪；
2——表明按下鼠標右鍵；

在IE瀏覽器中：
1——鼠標左鍵；
2 ——鼠標右鍵；
3 ——左右同時按下；
4——鼠標滾輪；
5 ——左鍵加滾輪；
6——右鍵加滾輪；
7 ——三個同時按下；

是否是感受IE很煩；那都有它，兄弟沒他我們前端去那掙錢？繼續解決：

document.onmouseup = function(evt){
        var e = evt || window.event;
        getButton(e);
}
function getButton(e){
    if(evt){
         return e.button;   
    }else if( window.event){
    switch(e.button){
          case 1: return 0;
          case 4: return 1;
          case 2: return 2
         }
    }

}        

8. 冒泡事件的阻止方法：

event . stopPropagation( ) ; //標準瀏覽器
event . cancelBubble = true ; //IE瀏覽器的方式， 其餘瀏覽器也支持該方式

9. 阻止超連接的默認行爲：

event . preventDefault( ) ; //標準瀏覽器
event .returnValue = false ; //IE瀏覽器的方式

十、事件監聽器

target. addEventListener(「click」, fun , false); //非IE
target . attachEvent(「onclick」, fun); //IE

十一、解除事件監聽器

targe . removeEventListener(「click」 , fun , false); //非IE
target . detachEvent(「onclick」, fun); //IE

12. 使用AJAX建立核心對象

var xhr = new XMLHttpRequest();    
 //全部現代瀏覽器均支持XMLHttpRequest 對象；
var xhr = new ActiveXObject(「Microsoft.XMLHTTP」); 
//IE5 和 IE6使用 ActiveX 對象。

　　

//判斷解決
var xml；
if(window.XMLHttpRequest){
   xml = new XMLHttpRequest()
}else{
　　xml = new ActiveXObject(「Microsoft.XMLHTTP」);
}