FireFox与IE浏览器在web开发上的一些区别

欢迎使用RSS订阅本Blog title="RSS 2.0" type="application/rss+xml" href="http://feed.feedsky.com/softwave" rel="alternate">
<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

开发准备工作

相关有价值的网站
中文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/ 

以下所有IE指IE6.0
验证是否是IE浏览器(来自于google js) 

1. var agt=navigator.userAgent.toLowerCase();
2. var is_ie=(agt.indexOf("msie")!=-1 && document.all);

正式开始

事件委托方法
IE

1. document.body.onload = inject; //Function inject()在这之前已被实现

firefox

1. document.body.onload = inject();

有人说标准是：

1. document.body.οnlοad=new Function('inject()'); 

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

1. if(isIE)
2. thistable.attachEvent("onmousedown",OnClickChangeTdBackColor);
3. //thistable.οnmοusedοwn=OnClickChangeTdBackColor;
4. else//deal firefox
5. {
6. for(var i=0;i<thistable.rows.length;i++)
7. {
8. var rowObj = thistable.rows[i];
9. for( var j=0;j<rowObj.cells.length;j++)
10. {
11. var cellObj = rowObj.cells[j];
12. cellObj.setAttribute("onmousedown","OnClickChangeTdBackColor(this)");
13. }
14. //alert(rowObj.cells[0].tagName);
15. }
16. }

这是来自 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 !
针对上面的知识,我们可以结合 prototype.__defineGetter__ 来实现 window.event 在 FireFox 下的实现:

下面给出一个简单的代码.. 有兴趣的可以补充

1. if(window.addEventListener)
2. {
3. FixPrototypeForGecko();
4. }
5. function FixPrototypeForGecko()
6. {
7. HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle);
8. window.constructor.prototype.__defineGetter__("event",window_prototype_get_event);
9. Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement);
10. }
11. function element_prototype_get_runtimeStyle()
12. {
13. //return style instead...
14. return this.style;
15. }
16. function window_prototype_get_event()
17. {
18. return SearchEvent();
19. }
20. function event_prototype_get_srcElement()
21. {
22. return this.target;
23. }
24. function SearchEvent()
25. {
26. //IE
27. if(document.all)
28. return window.event;
29. 
    
30. func=SearchEvent.caller;
31. while(func!=null)
32. {
33. var arg0=func.arguments[0];
34. if(arg0)
35. {
36. if(arg0.constructor==Event)
37. return arg0;
38. }
39. func=func.caller;
40. }
41. return null;
42. }
43. </body></html>

firefox与IE(parentElement)的父元素的区别
因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
IE
  obj.parentElement
firefox
  obj.parentNode
 
asp.net中UniqueID和clientID的区别
要使用document.getElementById 方法，则使用控件的时候要这样来作
"javascript:OnSelectSubCatalog(/""+subCatalog_drp.ClientID+"/","+catalogIDX+","+catID.ToString()+")";
 
调用Select元素的区别
移出一个选择项
________________________________________

IE ：sel.options.remove(sel.selectedIndex); 
firefox ：
增加选择项：
________________________________________
IE: subCatalog.add(new Option(text,value)); 
firefox: 
var opnObj = document.createElement("OPTION"); 
//opnObj.id = optionID;
opnObj.value = value; 
opnObj.text = text; 
subCatalog.appendChild(opnObj);
cursor:hand VS cursor:pointer 
firefox不支持hand，但ie支持pointer，所以建议统一使用pointer。
作者： zhaoyang3402@126.com(Tony)

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script> <script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&callback=GRC_p%28%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D%29%3Bnew%20GRC"></script>