开发注意：Firefox和IE兼容注意事项

1document.form.item

注意：如果使用document.formName.item("itemName")这样的语句，不能在Firefox上运行

方案：使用document.formName.elements["elementName"]

2集合类对象

注意：如果代码中的集合类对象使用()取用，IE可以运行，但Firefox不行

方案：改用[]作为下标运算。

例如：

(1)document.forms("formName")改为document.forms["formName"]。

(2)document.getElementsByName("checkName")(1)改为document.getElementsByName("checkName")[1]

3Window.event

注意：使用window.event无法在Firefox上运行

方案：Firefox的event只能在事件发生的现场使用，此问题暂无和好的解决方法，但可以变通

原代码(可在IE上运行)

<script language="Javascript">
function gotoSubmit() {
...
alert(window.event);    // use window.event
...
}

<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>

新代码(可在IE和Firefox上运行)

<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt);             // use evt
...
}
</script>

<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>

如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。

4HEML对象的id作为对象名

注意：在IE中，HTML对象的id可以作为document的下属性对象变量名直接使用【如document.myTable.idName】，但在FF上则不行

方案：用getElementById("idName")代替idName作为对象变量使用

5用idName字符串取得对象

注意：在IE中，利用eval(idName)可以取得id为idName的HTML对象，但FF不行

方案：用getElementById(idName)代替eval(idName)

6变量名与某HTML对象id相同问题

注意：在FF中，因为对象id不作为HTML对象的名称，所以可以使用与HTML对象id相同的变量名，IE中不能

方案：在声明变量时，一律加上var，以避免奇异，这样在IE中亦可正常运行，此外最好不要取与HTML对象id相同的变量名，以减少错误

7event.x与event.y

问题：在IE中,event对象有x、y属性，FF中没有

方案：

(1)在FF中，与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

(2) event.layerX在IE与FF中都有[具体意义有无差别尚未试验]

8frame

注意：在IE中可以使用window.testFrame取得该frame，FF中不行

方案：

在frame的使用方面mf和ie的最主要的区别是：

如果在frame标签中书写了以下属性：

<frame src="xx.htm" id="frameId" name="frameName" />

那么IE可以通过id或者name访问这个frame对应的window对象

而FF只可以通过name来访问这个frame对应的window对象

例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问

ie： window.top.frameId或者window.top.frameName来访问这个window对象

mf： 只能这样window.top.frameName来访问这个window对象

另外，在FF和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/目录下面的测试

9Attribute

在FF中，自己定义的属性必须使用getAttribute()取得

10parentElement parement.children

在FF中没有 parentElement parement.children 而用

parentNode parentNode.childNodes

childNodes的下标的含义在IE和FF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。

一般可以通过node.getElementsByTagName()来回避这个问题。

当html中节点缺失时，IE和FF对parentNode的解释不同，例如

<form>

<table>

<input/>

</table>

</form>

FF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点

FF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

11.const

问题： 在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。

方案：不使用 const ，以 var 代替。

12. body 对象

FF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

13. url encoding

在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';

frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器

一般会服务器报错参数没有找到

当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&

一般FF无法识别js中的&

14. nodeName 和 tagName

问题：在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象

有问题（具体情况没有测试，但我的IE已经死了好几次）。

方案： 使用 tagName，但应检测其是否为空。

15. 元素属性

IE下 input.type属性为只读，但是FF下可以修改

16. document.getElementsByName() 和 document.all[name]

在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。

17 Firefox无法响应DIV的onClick事件

原因：Firefox下不支持以下语法：

<DIV onClick="javascript:onPre();">

解决：全部按以下形式书写：

<DIV onClick=onPre()>

18、无法动态创建页面元素，即createElement无效

原因：在Fireox下不只能使用标签名做参数，不能使用<>形式，如以下语句在Firefox下不起作用,但在IE下能正常工作：

var obj=document.createElement('<DIV id=h_sb></DIV>');

解决：全部按以下形式书写：

var obj=document.createElement('DIV');

obj.id='h_sb';

19、在为动态创建的元素指定事件处理函数时，在Firefox下是运行指定函数，而非设置

原因：Firefox下，指定时间处理函数时不能带参数，否则Firefox只会执行函数，如：

obj.onClick=test(1);

在Firefox下会运行test函数，而不是将test函数关联到obj的click事件

解决：如果指定函数无参数则使用：

obj.onClick=test;

如果指定函数有参数则：

obj.onClick=function(){test(1)};

20将动态元素添加到页面时，insertBefore出错

原因：在Firefox下不可省略insertBefore函数的第二参数

解决：使用如下语句：

document.body.insertBefore(obj,null);

21、Firefox下无event对象，无法直接获取鼠标坐标

解决：在指定事件处理函数时使用如下语句：

obj.onClick=function(ev){onMidClick(ev,sb_h)};

说明：以上ev参数类时ie的event对象，由系统自动填入，第二参数为用户自定义参数

在处理函数onMidClick中：

function onMidClick(evt,objSb){

var mx; //获取鼠标的X坐标

if ( window.event ){

mx=event.clientX;

}else{

mx=evt.pageX;

}

}

22、表格操作函数无效，即以下语句无法工作：

var newrow=objnt.insertRow();

var cal=newrow.insertCell();

原因：与第四一样不可缺省参数

解决：使用如下语句：

var newrow=objnt.insertRow(-1);

var cal=newrow.insertCell(-1);

23、Firefox下无法直接获取styleSheet的cssText

在IE下，可直接获取并设置styleSheet的cssText，但在Firefox下只能使用document.styleSheets[0].cssRules[0].cssText单个获取样式，同时使用使用：

document.styleSheets[0].cssRules[0].cssText=newcssText；

页面不会自动更新样式，必须使用：

document.styleSheets[0].cssRules[0].style.cssText=newcssText；


25注意：在IE和FF中 insertRow和insertCell的区别
IE中可以这样调用：
var table = document.getElementById('table');

iTr= table.insertRow();
iTd = iTr.insertCell();
但在ff中，上面这样调用就会报错了：

FF和ie都可以这要调用：

var table = document.getElementById('table');

iTr = table.insertRow(-1);
iTd = iTr.insertCell(-1);
这里的-1代表：插入(行)单元格到 (rows)cells 集合内的最后一个
IE默认值是-1,但FF就没有默认值的。
为了兼容性好，建议都是加上 -1