Javascript在IE和FireFox中的不同表现简析


Posted in Javascript onDecember 03, 2012

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,以避免歧义.
7.input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
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下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
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.innerText在IE中能正常工作,但是innerText在FireFox中却不行.
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){ 
document.getElementById('element').innerText = "my text"; 
} else{ 
document.getElementById('element').textContent = "my text"; 
}

18. FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法:
obj.style.height = imgObj.height + 'px';

19. 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);

20. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
21. 消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效,padding属性对FireFox有效
22. CSS透明
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
23. 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;。
24. 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;
25.ie支持document.all 而firefox 不支持
改用下面三个tag的其中一个来代替document.all
getElementsByTagName("tagName") 可以得到得到所有标签元素的集合
getElementById("idName") 可以按id得到某一元素
getElementsByName("Name") 可以得到按name属性得到某一元素
26、firefox 中使用innerHTML 的方法
<div id="online"></div> 
document.all.online.innerHTML; //这种方法在IE中可以使用,但不是标准方法 
document.getElementById("online").innerHTML; //这样firefox就能使用innerHTML了

27、eval()与window.execScript()执行脚本
IE、firerox均支持eval(),firefox不支持window.execScript()
解决:统一使用eval()
28、对事件处理函数的重写
解决:(例):如对document的onclick()重写,统一使用document.onclick = function(){…}
Javascript 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 #Javascript
ajax异步刷新实现更新数据库
Dec 03 #Javascript
JavaScript代码复用模式实例分析
Dec 02 #Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 #Javascript
script标签属性type与language使用选择
Dec 02 #Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 #Javascript
json对象转字符串如何实现
Dec 02 #Javascript
You might like
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
应届毕业生求职信范文分享
2013/12/26 职场文书
2014升学宴答谢词
2014/01/26 职场文书
大国崛起英国观后感
2015/06/02 职场文书
2016十一国庆节感言
2015/12/09 职场文书
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技