开发注意：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="提交" οnclick="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="提交" οnclick="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就直接写&不要写&amp;例如var url = 'xx.jsp?objectName=xx&amp;objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&amp;
一般FF无法识别js中的&amp;

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