火狐兼容js讲解

1、1. document.form.item 问题(1) 现有问题：现有 代码 中存在 许 多 document.formName.item(itemName) 这样的 语句 ，不能 在 Firefox( 火狐 ) 下运行(2) 解决方法：改用 document.formName.elementselementName(3) 其它参见 22. 集合类对象问题(1) 现有问题： 现有代码中许多集合类对象取用时使用 () ，IE 能接受， Firefox( 火狐 ) 不能。(2) 解决方法：改 用 作 为 下 标 运 算 。 如 ： document.forms(formName) 改 为 docu

2、ment.formsformName 。又 如 ： document.getElementsByName(inputName)(1) 改 为 document.getElementsByName(inputName)1(3) 其它3. window.event(1) 现有问题：使用 window.event 无法在火狐浏览器上运行(2) 解决方法：火狐 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：原代码 ( 可在 IE 中运行 )： .function gotoSubmit() .alert(window.event); / use window.event.新代

3、码 ( 可在 IE 和火狐中运行 ) ： .function gotoSubmit(evt) evt = evt ? evt : (window.event ? window.event : null);.alert(evt); / use evt.此外，如果新代码中第一行不改，与老代码一样的话 (即 gotoSubmit 调用没有给参数 ) ，则 仍然只能在 IE 中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。4. HTML 对象的 id 作为对象名的问题(1) 现有问题在IE中，HTML对象的ID可以作为document的下属对象变量名直接使用。在火狐中不能。(2) 解决

4、方法用 getElementById(idName) 代替 idName 作为对象变量使用。5. 用 idName 字符串取得对象的问题(1) 现有问题在 IE 中，利用 eval(idName)(2) 解决方法可以取得 id 为 idName 的 HTML 对象，在火狐中不能。用 getElementById(idName)代替 eval(idName) 。6. 变量名与某 HTML 对象 id 相同的问题(1) 现有问题在 火狐 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同 的变量名， IE 中能。(2) 解决方法 在声明变量时，一律加上 v

5、ar ，以避免歧义，这样在 IE 中亦可正常运行。 此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。(3) 其它 参见 问题 47. 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 有微妙的差别(当整个页面有滚动条的时候) ，不过大多数 时

6、候是等效的。如果要完全一样，可以稍麻烦些：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 标签中书写了以下属性：来访问 那么 ie 可以通过 id 或者 name 访问这个 frame 对应的 window 对象 而火狐只可以通过

7、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(testFr

8、ame).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.childNo

9、deschildNodes的下标的含义在IE和火狐中不同，火狐使用DOM范，childNodes中会插入空白文本节点。一般可以通过 node.getElementsByTagName() 来回避这个问题。 当 html 中节点缺失时， IE 和火狐对 parentNode 的解释不同，例如 火狐中 input.parentNode 的值为 form, 而 IE 中 input.parentNode 的值为空节点火狐中节点没有 removeNode 方法，必须使用如下方法 node.parentNode.removeChild(node)11. const 问题(1) 现有问题 :在 IE 中不

10、能使用 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.getE