html浏览器对JavaScript语法兼容性的问题

相关有价值的网站
中文firefox开发论坛地址 http://www.firefox.net.cn/newforum 
讨论IE与Netscape区别的 http://www-128.ibm.com/developerworks/web/library/wa-ie2mozgd/ 
http://www.w3schools.com/

firefox开发工具
javascript 控制台(firefox工具中) ,dom inspector (forefox工具中，需要安装的时候选择自定义安装-开发工具) 
http://www.hacksrus.com/~ginda/venkman/ 

1.      在FireFox中可以使用与HTML节点对象ID属性值相同的JS变量名称，但是IE中不行。

解决办法：在命名上区分HTML节点对象ID属性值和JS变量

 

2.      IE不支持JS的const,无法定义JS常量

解决办法：全部用var定义为变量

 

3.      在JS中书写URL地址字符串时&字符就直接写为“&”(去掉双引号),不要写“&”，否则容易出现URL识别不正常的错误

 

4.      在IE中可以通过showModalDialog和showModelessDialog打开模式和非模式窗口，FireFox下则不能

解决办法：使用Window.Open方法。 如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用Window.Opener属性来访问父窗口；如果需要父窗口控制子窗口的话，使用Var subWindow = Window.Open(pageURL,Name,Parameters); 来获得新开的窗口对象

 

5.      在IE中向表格里添加一行的方法insertRow()如果不指定参数，默认参数为-1,将自动向Table中追加1行；在FireFox中一定要指定参数如-1,参数为空会报错

 

6.      在IE中可以使用new ActiveXObject()的方法实例化对象，如var xmlDom = new ActiveXObject("Microsoft.XMLHTTP");但是FireFox不支持ActiveXObject,只能通过这种方法如var xmlDom = new XMLHttpRequest();实例化对象

7.    在firefox无法取得event.srcElement ，通过其他方式传递对象

<pre name="code" class="javascript" style="color: rgb(92, 92, 92); font-size: 14px; line-height: 18px;">if(isIE)

<pre name="code" class="javascript">thistable.attachEvent("onmousedown",OnClickChangeTdBackColor);

<pre name="code" class="java">else//deal firefox

{

for(var i=0;i<thistable.rows.length;i++)

{

<pre name="code" class="java">var rowObj = thistable.rows[i];

for( var j=0;j<rowObj.cells.length;j++)

{

var cellObj = rowObj.cells[j];

<pre name="code" class="java">cellObj.setAttribute("onmousedown","OnClickChangeTdBackColor(this)");

}

}

}

<pre name="code" class="javascript"><pre name="code" class="java">

这是来自 http://blog.joycode.com/lostinet/archive/2005/02/27/44999.aspx
在FireFox下编写事件处理函数是很麻烦的事.
因为FireFox并没有 window.event . 如果要得到 event 对象,就必须要声明时间处理函数的第一个参数为event.

所以为了兼容IE与FireFox,一般的事件处理方法为:

1. btn.οnclick=handle_btn_click;
2. function handle_btn_click(evt)
3. {
4. if(evt==null)evt=window.event;//IE
5. //处理事件.
6. }

对于简单的程序,这不算麻烦。 但对于一些复杂的程序,某写函数根本就不是直接与事件挂钩的.如果要把event传进该参数,那么所有的方法都要把event传来传去..这简直就是噩梦了。

下面介绍一个解决这个麻烦事的方法,与原理.

JScript中，函数的调用是有一个 func.caller 这个属性的.
例如 

1. function A()
2. {
3. B();
4. }
5. function B()
6. {
7. alert(B.caller);
8. }

如果B被A调用,那么B.caller就是A

另外,函数有一个arguments属性. 这个属性可以遍历函数当前执行的参数:

1. function myalert()
2. {
3. var arr=[];
4. for(var i=0;i
5. arr[i]=myalert.arguments[i];
6. alert(arr.join("-"));
7. }
8. alert("hello","world",1,2,3)

就能显示 hello-world-1-2-3
(arguments的个数与调用方有关,而与函数的参数定义没有任何关系)

根据这两个属性,我们可以得到第一个函数的event对象:

1. btn.οnclick=handle_click;
2. function handle_click()
3. {
4. showcontent();
5. }
6. function showcontent()
7. {
8. var evt=SearchEvent();
9. if(evt&&evt.shiftKey)//如果是基于事件的调用,并且shift被按下
10. window.open(global_helpurl);
11. else
12. location.href=global_helpurl;
13. }
14. function SearchEvent()
15. {
16. func=SearchEvent.caller;
17. while(func!=null)
18. {
19. var arg0=func.arguments[0];
20. if(arg0)
21. {
22. if(arg0.constructor==Event) // 如果就是event 对象
23. return arg0;
24. }
25. func=func.caller;
26. }
27. return null;
28. }

这个例子使用了SearchEvent来搜索event对象. 其中 'Event' 是 FireFox 的 event.constructor .
在该例子运行时， SearchEvent.caller就是showcontent,但是showcontent.arguments[0]是空.所以 func=func.caller 时,func变为handle_click .
handle_click 被 FireFox 调用, 虽然没有定义参数,但是被调用时,第一个参数就是event,所以handle_click.arguments[0]就是event !