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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
javascript 写类方式之一
Jul 05 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
js自定义回调函数
Dec 13 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
js css自定义分页效果
Feb 24 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 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学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
php操作redis缓存方法分享
2015/06/03 PHP
用javascript实现自定义标签
2007/05/08 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
python获取本机外网ip的方法
2015/04/15 Python
python选择排序算法实例总结
2015/07/01 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
python中可以声明变量类型吗
2020/06/18 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
财务出纳岗位职责
2015/03/31 职场文书
工作会议通知
2015/04/15 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
MongoDB支持的索引类型
2022/04/11 MongoDB
使用refresh_token实现无感刷新页面
2022/04/26 Javascript