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

欢迎使用RSS订阅本Blog  <link 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工具中)
dominspector(forefox工具中，需要安装的时候选择自定义安装-开发工具)
http://www.hacksrus.com/~ginda/venkman/

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

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

正式开始

事件委托方法
IE

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

firefox

document.body.onload=inject();

有人说标准是：

    
          document.body.onload=
        
          new
        
          Function(
        
          'inject()'
        
          );

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

    
          if
        
          (isIE)
        
          thistable.attachEvent(
        
          "onmousedown"
        
          ,OnClickChangeTdBackColor);
        
          //thistable.onmousedown=OnClickChangeTdBackColor;
        
          else
        
          //dealfirefox
        
          {
        
          for
        
          (
        
          var
        
          i=0;i<thistable.rows.length;i++)
        
          {
        
          var
        
          rowObj=thistable.rows[i];
        
          for
        
          (
        
          var
        
          j=0;j<rowObj.cells.length;j++)
        
          {
        
          var
        
          cellObj=rowObj.cells[j];
        
          cellObj.setAttribute(
        
          "onmousedown"
        
          ,
        
          "OnClickChangeTdBackColor(this)"
        
          );
        
          }
        
          //alert(rowObj.cells[0].tagName);
        
          }
        
          }

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

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

    
          btn.onclick=handle_btn_click;
        
          function
        
          handle_btn_click(evt)
        
          {
        
          if
        
          (evt==
        
          null
        
          )evt=window.event;
        
          //IE
        
          //处理事件.
        
          }

对于简单的程序,这不算麻烦.

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

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

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

    
          function
        
          A()
        
          {
        
          B();
        
          }
        
          function
        
          B()
        
          {
        
          alert(B.caller);
        
          }

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

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

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

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

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

    
          btn.onclick=handle_click;
        
          function
        
          handle_click()
        
          {
        
          showcontent();
        
          }
        
          function
        
          showcontent()
        
          {
        
          var
        
          evt=SearchEvent();
        
          if
        
          (evt&&evt.shiftKey)
        
          //如果是基于事件的调用,并且shift被按下
        
          window.open(global_helpurl);
        
          else
        
          location.href=global_helpurl;
        
          }
        
          function
        
          SearchEvent()
        
          {
        
          func=SearchEvent.caller;
        
          while
        
          (func!=
        
          null
        
          )
        
          {
        
          var
        
          arg0=func.arguments[0];
        
          if
        
          (arg0)
        
          {
        
          if
        
          (arg0.constructor==Event)
        
          //如果就是event对象
        
          return
        
          arg0;
        
          }
        
          func=func.caller;
        
          }
        
          return
        
          null
        
          ;
        
          }

这个例子使用了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下的实现:

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

    
          if
        
          (window.addEventListener)
        
          {
        
          FixPrototypeForGecko();
        
          }
        
          function
        
          FixPrototypeForGecko()
        
          {
        
          HTMLElement.prototype.__defineGetter__(
        
          "runtimeStyle"
        
          ,element_prototype_get_runtimeStyle);
        
          window.constructor.prototype.__defineGetter__(
        
          "event"
        
          ,window_prototype_get_event);
        
          Event.prototype.__defineGetter__(
        
          "srcElement"
        
          ,event_prototype_get_srcElement);
        
          }
        
          function
        
          element_prototype_get_runtimeStyle()
        
          {
        
          //returnstyleinstead...
        
          return
        
          this
        
          .style;
        
          }
        
          function
        
          window_prototype_get_event()
        
          {
        
          return
        
          SearchEvent();
        
          }
        
          function
        
          event_prototype_get_srcElement()
        
          {
        
          return
        
          this
        
          .target;
        
          }
        
          function
        
          SearchEvent()
        
          {
        
          //IE
        
          if
        
          (document.all)
        
          return
        
          window.event;
        
          func=SearchEvent.caller;
        
          while
        
          (func!=
        
          null
        
          )
        
          {
        
          var
        
          arg0=func.arguments[0];
        
          if
        
          (arg0)
        
          {
        
          if
        
          (arg0.constructor==Event)
        
          return
        
          arg0;
        
          }
        
          func=func.caller;
        
          }
        
          return
        
          null
        
          ;
        
          }
        
          </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(newOption(text,value));
firefox:
varopnObj=document.createElement("OPTION");
//opnObj.id=optionID;
opnObj.value=value;
opnObj.text=text;
subCatalog.appendChild(opnObj);
cursor:handVScursor: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>

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

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义