不同浏览器的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，在FF和Safari中看到的日期是111，原因是在FF和safari返回的是当前年份-1900的值。

兼容处理：

//方式一
var year= new Date().getYear();
year = (year<1900?(1900+year):year);
document.write(year);
//方式二
var year = new Date().getFullYear();
document.write(year);
 

 

9、innerText的使用

【分析原因】

FF不支持innerText，它支持textContent来实现innerText，不过textContent没有像innerText一样考虑元素的display方式，所以不完全与IE兼容。如果不用textContent，字符串里面不包含HTML代码也可以用innerHTML代替。

【兼容处理】

通过判断不同浏览器做不同的处理

if(document.all){
   document.getElementById('element').innerText = "mytext";
} else{
   document.getElementById('element').textContent = "mytext";
}

 注：Safari和Chrome对innerText和textContent都支持。

 

10、Frame的引用

【分析原因】

IE可以通过id或者name访问这个frame对应的window对象；而FF只可以通过name来访问这个frame对应的window对象。

 

【应用场景】

在一个页面嵌套了一个iframe页面(下面简称父页面和子页面)。父页面取子页面的值。

<iframe id="frame_id" src="frametest.jsp" width="100%" height="100%" title="你好世界">

此时如果父页面想获取子页面例如div中的显示值，IE下可以这样写：

 var obj = window.top.frame_id.document.getElementById(div_id);

 alert(obj.innerText);

但是在FF中却无法取子页面中的值，原因就是FF只支持window.top.frameName来访问子页面中的window对象。所以在IE、safari中是支持通过frameName或是frameId来访问子页面window对象的。

解决方法：1、尽量都是用frameName去访问子页面window对象。

  2、在FF、IE、Safari中都支持window.document.getElementById(frameId)来获得子页面window对象。

 

未完待续。。。欢迎补充。。。