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

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下,可通过
Js代码

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


?而在Firefox下,只能通过

1. 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的值;如:
Js代码

??
1. var?input?=?document.getElementById("button1");??
	2. 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来获得。如下:

????
Html代码 
	1. <script?type="text/javascript">??
	2. ?????//只有IE支持??
	3. ????//window.frameId.location?=?"http://www.iteye.com";??
	4. ????//IE,FireFox都支持??
	5. ????window.frameName.location?=?"http://www.iteye.com";??
	6. ????//IE,FireFox都支持??
	7. ????//document.getElementById("frameId").contentWindow.location?=?"http://www.iteye.com";??
	8. </script>??
	9. ??
	10. <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。


(二)

1、发现IE下input标签的id属性默认和name属性相同,而Firefox必须明确写出id属性的名称否则不能使用id属性。
如:

<input type="text" name="username" value=""> 
在IE下如下代码可以执行而在Firefox下却不可以: 
<script> 
alert(document.getElementById("username").value); 
</script> 
必须改为如下代码才可以: 
<input type="text" name="username" id="username" value=""> 


以下为转载:
1. document.formName.item("itemName") 问题
说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];
Firefox下,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].
2.集合类对象问题
说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.
3.自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
4.eval("idName")问题
说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementBy