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

时间:2021-08-27 09:03:55

  上篇已经写过浏览器的兼容发展历史以及主流浏览器,主要的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”);
}