聊聊一直困扰前端程序员的浏览器兼容-【JavaScript】

　　上篇已经写过浏览器的兼容发展历史以及主流浏览器，主要的css兼容我知道的已全部写到，这篇这篇专攻javascript的兼容。

1、getYear()方法

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

  在IE中得到的日期是“2016”，在Firefox中看到的日期是“116”,主要是因为在 Firefox 里面 getYear() 返回的是 "当前年份-1900" 的值。

所以，一般用getFullYear( )方法获取年份。

2、自定义属性问题

 

IE8及以下版本，可以通过可以使用获取常规属性的方法来获取HTML中的自定义属性；
标准的浏览器，是不能直接获取自定义属性。
解决方法：统一通过 getAttribute() 获取自定义属性。 

 

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

getAttribute(“class”); //IE7及以下版本不支持该方法，并且在浏览器中的返回值为null，其他浏览器支持该方法；
getAttribute(“className”); // IE7及以下版本支持该方法，其他浏览器不支持

解决方法：

obj.getAttribute('class') === null ? obj.getAttribute('className')  : obj.getAttribute('class') //来他个判断

4、获取css的属性方法

element.style.attr; //只能获取行内样式表里的属性；
element.currentStyle.attr; //IE浏览器支持该方法；
getComputedStyle(element).attr; //IE浏览器不支持，其他浏览器支持。

//解决：继续判断

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

　　

5、空白文本节点

在标准浏览器下，用childNodes获取子节点，会把换行和空白字符都算作父节点的子节点，而在IE8及以下版本的浏览器childNodes不会。

6、window.eventw问题

window.event 能在IE或是在早期版本的谷歌浏览器下运行，而不能在Firefox下运行，这是因为Firefox的event对象只能在事件发生的现场使用，Firefox必须从源处加入event作参数传递。IE忽略该参数，用window.event来读取该event。

解决：

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

7、鼠标按键（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浏览器的方式

10、事件监听器

target. addEventListener(“click”, fun , false); //非IE
target . attachEvent(“onclick”, fun); //IE

11、解除事件监听器

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”);
}