聊聊一直困扰前端程序员的浏览器兼容-【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”);
}