IE和Firefox在JavaScript应用中的兼容性探讨


Posted in Javascript onApril 01, 2008

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下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象. 

5.变量名与某HTML对象ID相同的问题

说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.

6.const问题

说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.

7.input.type属性问题

说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.

8.window.event问题

说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.
解决方法:
IE:

<input name="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/> 
... 
<script language="javascript"> 
function gotoSubmit8_1() { 
... 
alert(window.event); //use window.event 
... 
} 
</script>

IE&Firefox:
<input name="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/> 
... 
<script language="javascript"> 
function gotoSubmit8_2(evt) { 
... 
evt=evt?evt:(window.event?window.event:null); 
alert(evt); //use evt 
... 
} 
</script>

9.event.x与event.y问题

说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

10.event.srcElement问题

说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 

11.window.location.href问题

说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.

12.模态和非模态窗口问题

说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解 决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可 以在子窗口中使用window.opener来访问父窗口. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

13.frame问题

以下面的frame为例:
<frame src="xxx.html" id="frameId" name="frameName" />

(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
Firefox:只能使用window.frameName来访问这个frame对象.
另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.

(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.

如果需要将frame中的参数传回父窗口,可以在frme中使用parent来访问父窗口。例如:parent.document.form1.filename.value="Aqing";

14.body问题

Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在.

例如:
Firefox:

<body> 
<script type="text/javascript"> 
document.body.onclick = function(evt){ 
evt = evt || window.event; 
alert(evt); 
} 
</script> 
</body>

IE&Firefox:
<body> 
</body> 
<script type="text/javascript"> 
document.body.onclick = function(evt){ 
evt = evt || window.event; 
alert(evt); 
} </script>

15. 事件委托方法

IE:document.body.onload = inject; //Function inject()在这之前已被实现
Firefox:document.body.onload = inject();
有人说标准是:
document.body.onload=new Function('inject()');

16. firefox与IE(parentElement)的父元素的区别

IE:obj.parentElement
firefox:obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.

17.cursor:hand VS cursor:pointer

firefox不支持hand,但ie支持pointer
解决方法: 统一使用pointer

18.innerText在IE中能正常工作,但是innerText在FireFox中却不行.

解决方法:
if(navigator.appName.indexOf("Explorer") > -1){ 
      document.getElementById('element').innerText = "my text";
} else{ 
      document.getElementById('element').textContent = "my text";
}

19. FireFox中类似 obj.style.height = imgObj.height 的语句无效

解决方法:
obj.style.height = imgObj.height + 'px';

20. ie,firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChile方法也不管用。

解决方法:
//向table追加一个空行:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);

21. padding 问题

padding 5px 4px 3px 1px FireFox无法解释简写,必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

22. 消除ul、ol等列表的缩进时

样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效,padding属性对FireFox有效

23. CSS透明

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。

24. CSS圆角

IE:不支持圆角。
FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。

25. CSS双线凹凸边框

IE:border:2px outset;。
FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;

Javascript 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
vue router 配置路由的方法
Jul 26 Javascript
JavaScript的面向对象方法以及差别
Mar 31 #Javascript
二行代码解决全部网页木马
Mar 28 #Javascript
通过 Dom 方法提高 innerHTML 性能
Mar 26 #Javascript
js用图作提交按钮或超连接
Mar 26 #Javascript
利用js对象弹出一个层
Mar 26 #Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 #Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 #Javascript
You might like
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
Python二分查找详解
2015/09/13 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
Python中property属性实例解析
2018/02/10 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
python ---lambda匿名函数介绍
2019/03/13 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
关于python中导入文件到list的问题
2020/10/31 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
实习单位接收函
2014/01/11 职场文书
商务经理岗位职责
2014/07/30 职场文书
无房证明范本
2014/09/17 职场文书
邀请函模板
2015/02/02 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js
Java字符串逆序方法详情
2022/03/21 Java/Android
Golang map映射的用法
2022/04/22 Golang
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python