日期:2014-05-16  浏览次数:20386 次

不同浏览器的Javascript兼容性总结

? 对于大多数程序员而言在平时的编码过程中很少会注意到跨浏览器的问题,而当这些问题从用户那边被抛回来后才知道原来问题还是很严重的。在正式规范、事实标准以及各种实现之间存在的差异会让你觉得很烦躁。所以就需要我们在平时养成良好的编码习惯,尽量保证我们的代码能够适应不同浏览器的要求。

? 下面就把平时遇到的一些浏览器差异问题总结出来,千里之行,始于足下。虽然不能完全避免开发中浏览器兼容问题,但是还是一点点的努力吧。

1、Ajax请求

? IE: new ActiveXObject()

?? ?FF、Chrome:new XMLHttpRequest()

解决办法 统一封装创建XMLHttpRequest对象的方法

/**
 * 创建兼容不同浏览器的XmlHttpRequest对象
 * @return
 */
function createXmlHttpRequest(){
	var xmlHttp ;
	try{
		//FF,Opera,Safari
		xmlHttp = new XMLHttpRequest();
	}catch(e){
		try{
			//支持IE6.0+
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				//支持IE5.5+
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){
				alert("提示: 您的浏览器暂时不支持Ajax请求!");
				return false;
			}
		}
	}
	return xmlHttp;
}
?

2、XML解析处理

?

暂时解决不了。。。

?

3、集合类对象的()与[]的问题

IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象。

document.write(document.forms("formName").src);
//该写法在IE下能访问到Form对象的src属性

解决办法:将document.forms("formName")改为 document.forms["formName"]。统一使用[]获取集合类对象。

?

4、对浏览器Native组件调用属性、方法大小写问题

IE:不区分大小写

FF、Chrome:区分大小写

如:Ajax返回的response对象,IE支持response.responseXml和responseXML;FF等浏览器支持response.responseXML,解决办法只有在编写程序时尽量避免不兼容的写法。

?

5、document.all问题

暂未解决

?

6、window.event问题

IE:支持

FF、Chrome:不支持,只能通过参数传入方法

注意在不同浏览器中event对象api也不同。如IE下通过event.srcElement获得事件触发HTML元素,而FF、Chrome通过event.target获得。

解决方法:程序编写时避免,或是使用一些Ext、Jquery等JS类库来统一操作。


7、获取HTML元素

IE:支持el.name 、el.getAttribute(name)

FF、Chrome:基本属性支持el.name其余属性仅支持el.getAttribute(name)

解决方法: 统一采用标准方法el.getAttribute(name)获取

?

8、new Date().getYear()

分析原因:在IE中得到的日期是2011,在FFSafari中看到的日期是111,原因是在FF