Javascript浏览器兼容性问题总结

阅读() @2018-10-29 18:16:05

浏览器的兼容性问题真的是让人头疼,我之前总结了《html和css中常见的浏览器兼容性处理》,但是原生的Javascript也存在很多的兼容性问题,其中最具代表性的是是IE浏览器(下简称“IE”)、火狐浏览器(下简称称“火狐”)和谷歌浏览器(下简称“谷歌”)。下面只是总结出其中的一部分,后期还会陆续更新!

1、页面滚动时,通过js检测scrollTop。

window.onscroll = function(){
	var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
	if(scrollTop>10){
		console.log("你好");
	}
}
//document.body.scrollTop不兼容IE
//document.documentElement.scrollTop;//不兼容谷歌

解决方法:下面这段代码兼容所有的浏览器:

var scrollTop = window.pageYOffset;   //兼容所有的浏览器

2、IE下input.type属性为只读,但是Firefox下 input.type 属性为读写。

<input type="text" id="inpt" value="点我">
var oInpt = document.getElementById("inpt");
oInpt.onclick = function(){
	this.type = "submit";//无效

}

解决方法:不修改 input.type 属性。如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素。 代码如下:

var oInpt = document.getElementById("inpt");
oInpt.onclick = function(){
	this.style.display = "none";
	var newInpt = document.createElement("input");
	newInpt.type = "submit";
	newInpt.value = "我变成了一个按钮";
	document.body.appendChild(newInpt);
}

3、IE8及以下浏览器不支持document.getElementsByClassName("类名")。

var oDiv = document.getElementsByClassName("box")[0];//无效

解决方法:先使用getElementsByTagName("*")取出文档中所有元素,然后进行遍历,使用正则表达式找出匹配的元素放入一个数组返回。

var oDiv;
var arry = [];
if(document.getElementsByClassName){
	arry = document.getElementsByClassName("box");
}else{
	oDiv = document.getElementsByTagName("*");
	var reg = new RegExp("box");
	for(var i=0; i<oDiv.length; i++){
		if(reg.test(oDiv[i].className)){
			arry.push(oDiv[i]);
		}
	}
}
arry[0].onclick = function(){
	alert(this.innerHTML);
}

4、火狐浏览器不支持使用 obj.parentElement访问父节点。

var oLi1 = document.getElementById("li1");
	oLi1.onclick = function(){
	        alert(this.parentElement.className);//无效
}

解决方法:所有的浏览器均支持obj.parentNode;

var oLi1 = document.getElementById("li1");
	oLi1.onclick = function(){
		alert(this.parentNode.className);
}

后期还会陆续更新更多的Javascript兼容性问题!如果是在网页中写js特效的话,建议用jquery,这样更方便,而且兼容性比较好!

微信二维码