JavaScript在IE和Firefox下的兼容性问题

问题1：获取一个元素对象的引用，在IE下，可直接使用该元素对象的id名；而在FireFox下，只能使用getElementById(idName)方法。

解决方法：统一用getElementById(idName)。

 

问题2：获取表单元素的引用，在IE下，可通过form.item('username')这种形式；而在FireFox下，只能通过form.elements['username']。（注：var form = document.getElementById("form");）

解决方法：统一用form.elements['username']这种形式。

 

问题3：访问集合对象成员时，在IE下，可通过

var elements = form.elements; var firstElement = elements(0);

 而在Firefox下，只能通过

var elements = form.elements; var firstElement = elements[0];

 解决方法：统一用方括号加下标索引来访问。

 

问题4：读取自定义属性，在IE下，可像操作对象属性一样直接访问；而在FireFox下，只能通过getAttribute(attrName)方式访问。

解决方法：统一用getAttribute(attrName)方式访问。

 

问题5：常量的定义，在FireFox下能通过const关键词定义，如const PI = 3.14; 而在IE下却报错。

解决方法：统一用var定义，如var PI = 3.14; 区别常量和变量可用大小写字母来区别。

 

问题6：input元素的type属性，在FireFox下可修改其type的值；如：

var input = document.getElementById("button1");
input.type = "text";  //将按钮变成输入框

 但在IE下却不能这样使用。

解决方法：无

 

问题7：模式窗口window.showModalDialog(...)和非模式窗口window.showModelessDialog(...)，只能在IE下运行，而在Firefox下却用不了。

解决方法：统一用window.open(...)代替。

 

问题8：frame操作问题，在IE中，可通过window.frameId或者window.frameName即可获得对frame页面window对象的引用; 而在FireFox下，只能通过window.frameName来获得。如下：

<script type="text/javascript">
	 //只有IE支持
	//window.frameId.location = "http://www.iteye.com";
	//IE,FireFox都支持
	window.frameName.location = "http://www.iteye.com";
	//IE,FireFox都支持
	//document.getElementById("frameId").contentWindow.location = "http://www.iteye.com";
</script>

<iframe id="frameId" name="frameName" src="about:blank" width="750" height="500" />

 

问题9：读取和设置一个元素内的文本，在IE下，可用innerText属性；而在fireFox下，可用textContent属性，两者效果一样。

解决方法：让FireFox也支持innerText属性，代码如下：

 

问题10：对父元素的引用，在IE下，可用parentElement和parentNode；而在FireFox下，只能使用parentNode。

解决方法：统一用parentNode。

 

参考资料：《Ajax从入门到精通》

 

评论

1 楼 gongji 2010-05-04  

是啊，我感觉firefox更加严谨。
不过貌似类似window.document.elementID.value 这种调用
在后期的firefox中已经实现了对其的兼容
只是在html标签的声明中，必须要定义为老式的html 4.0 lose貌似
而不能为xhtml或者html strict