整理一些JavaScript的IE和火狐的兼容性注意事项


Posted in Javascript onMarch 17, 2011

1. document.form.item 问题
(1)现有问题:
现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在Firefox(火狐)下运行
(2)解决方法:
改用 document.formName.elements["elementName"]
(3)其它
参见 2
2. 集合类对象问题
(1)现有问题:
现有代码中许多集合类对象取用时使用 (),IE 能接受,Firefox(火狐)不能。
(2)解决方法:
改用 [] 作为下标运算。如:document.forms("formName") 改为 document.forms["formName"]。
又如:document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
(3)其它
3. window.event
(1)现有问题:
使用 window.event 无法在火狐浏览器上运行
(2)解决方法:
火狐 的 event 只能在事件发生的现场使用,此问题暂无法解决。可以这样变通:
原 代码(可在IE中运行): <br /><input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/><br />...<br /><script language="javascript"><br />function gotoSubmit() {<br />...<br />alert(window.event); // use window.event<br />...<br />}<br /></script>
新代码(可在IE和火狐中运行): <input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/><br />...<br /><script language="javascript"><br />function gotoSubmit(evt) {<br />evt = evt ? evt : (window.event ? window.event : null);<br />...<br />alert(evt); // use evt<br />...<br />}<br /></script>
此外,如果新代码中第一行不改,与老代码一样的话(即 gotoSubmit 调用没有给参数),则仍然只能在IE中运行,但不会出错。所以,这种方案 tpl 部分仍与老代码兼容。
4. HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在火狐中不能。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用。
5. 用idName字符串取得对象的问题
(1)现有问题
在IE中,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象,在火狐中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。
6. 变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 火狐 中,因为对象 id 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名,IE中能。
(2)解决方法
在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。
此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。
(3)其它
参见 问题4
7. event.x 与 event.y 问题
(1)现有问题
在IE 中,event 对象有 x, y 属性,火狐中没有。
(2)解决方法
在火狐中,与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别(当整个页面有滚动条的时候),不过大多数时候是等效的。
如果要完全一样,可以稍麻烦些:
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
(3)其它
event.layerX 在IE与火狐中都有,具体意义有无差别尚未试验。
8. 关于frame
(1)现有问题
在 IE中 可以用window.testFrame取得该frame,火狐中不行
(2)解决方法
在frame的使用方面火狐和ie的最主要的区别是:
如果在frame标签中书写了以下属性:
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而火狐只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面,那么可以这样访问
ie: window.top.frameId或者window.top.frameName来访问这个window对象
火狐: 只能这样window.top.frameName来访问这个window对象
另外,在火狐和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame'文章
以及/test/js/test_frame/目录下面的测试
----adun 2004.12.09修改
9. 在火狐中,自己定义的属性必须getAttribute()取得
10.在火狐中没有 parentElement parement.children 而用
parentNode parentNode.childNodes
childNodes的下标的含义在IE和火狐中不同,火狐使用DOM规范,childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时,IE和火狐对parentNode的解释不同,例如
<form>
<table>
<input/>
</table>
</form>
火狐中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
火狐中节点没有removeNode方法,必须使用如下方法 node.parentNode.removeChild(node)
11.const 问题
(1)现有问题:
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
(2)解决方法:
不使用 const ,以 var 代替。
12. body 对象
火狐的body在body标签没有被浏览器完全读入之前就存在,而IE则必须在body完全被读入之后才存在
13. url encoding
在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外,因为tpl中符合xml规范,要求&书写为&
一般火狐无法识别js中的&
14. nodeName 和 tagName 问题
(1)现有问题:
在火狐中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值。在 IE 中,nodeName 的使用好象
有问题(具体情况没有测试,但我的IE已经死了好几次)。
(2)解决方法:
使用 tagName,但应检测其是否为空。
15. 元素属性
IE下 input.type属性为只读,但是火狐下可以修改
16. document.getElementsByName() 和 document.all[name] 的问题
(1)现有问题:
在 IE 中,getElementsByName()、document.all[name] 均不能用来取得 div 元素(是否还有其它不能取的元素还不知道)。

Javascript 相关文章推荐
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
各种常用的JS函数整理
Oct 25 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
了解JavaScript中的选择器
May 24 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
jquery.validate分组验证代码
Mar 17 #Javascript
jquery中ajax调用json数据的使用说明
Mar 17 #Javascript
jQuery版Tab标签切换
Mar 16 #Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 #Javascript
jquery radio 操作代码
Mar 16 #Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 #Javascript
初识JQuery 实例一(first)
Mar 16 #Javascript
You might like
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
基于node.js的快速开发透明代理
2010/12/25 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python使用sorted排序的方法小结
2017/07/28 Python
python opencv之SURF算法示例
2018/02/24 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
如何在Django项目中引入静态文件
2019/07/26 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
学习2014年全国两会心得体会
2014/03/12 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
公务员处分决定书
2015/06/25 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android