在IE 和 Firefox 中兼容使用js

本文分享了在JavaScript开发中确保代码能在不同浏览器(如IE和Firefox)中稳定运行的经验教训,包括统一元素标识符的使用规则及解决浏览器间差异的具体方法。
在家在写页面的时候,尤其是一些门户网站,最后项目组有人规范以下javascrīpt的写法,尽量做到一处编写,多处运行;

这里有4条经验:

1、在定义 页面元素的时候,如果该页面元素不需要被脚本调用,那么它就不需要定义其name和id属性;

2、如果需要定义页面元素的name,id属性,那么避免不同元素的name和id相同;

3、如果没有特殊需要,尽量让name和id相同,这主要是为了通用

4、在脚本中,获得元素时,尽量用document.getElementById("name / id") ,能不使用尽量不使用其他的





下面是收集的一些IE和Firefox的差异:


1. 对象问题
1.1 Form对象
现有问题:
现有代码这获得form对象通过document.forms("formName"),这样使用在IE 能接受,MF 不能。
解决方法:
改用 作为下标运算。改为document.forms["formName"]
备注
上述的改用 作为下标运算中的formName是id而name

1.2 HTML对象
现有问题:
在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
document.all("itemName")或者document.all("itemId")
解决方法:
使用对象ID作为对象变量名
document.getElementById("itemId")
备注
document.all是IE自定义的方法,所以请大家尽量不使用。
还有一种方式,在IE和MF都可以使用
var f = document.forms["formName "];
var o = f. itemId;

1.3 DIV对象
现有问题:
在 IE 中,DIV对象可以使用ID作为对象变量名直接使用。在 MF 中不能。
DivId.style.display = "none"
解决方法:
document.getElementById("DivId").style.display = "none"
备注
获得对象的方法不管是不是DIV对象,都使用getElementById方法。参见1.2


1.4 关于frame
现有问题
在 IE中 可以用window.testFrame取得该frame,mf中不行
解决方法
在frame的使用方面MF和IE的最主要的区别是:
如果在frame标签中书写了以下属性:

那么IE可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面,那么可以这样访问
IE: window.top.frameId或者window.top.frameName来访问这个window对象
MF:只能这样window.top.frameName来访问这个window对象
另外,在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容

1.5 窗口
现有问题
IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口,但是MF不支持。
解决办法
直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要传递参数,可以使用frame或者iframe。

2. 总结
2.1 在JS中定义各种对象变量名时,尽量使用id,避免使用name。
在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能,所以在平常使用时请尽量使用id,避免只使用name,而不使用id。

2.2 变量名与某 HTML 对象 id 相同的问题
现有问题
在 MF 中,因为对象 id 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名,IE 中不能。
解决方法
在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。
此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值