Firefox与IE在Javascript编写下的区别

Firefox与IE在Javascript编写上的区别
1.加载事件
  IE：

document.body.detachEvent("onclick",onclickfunction);document.body.attachEvent("onclick",onclickfunction);

  Firefox

document.body.removeEventListener("click",onclickfunction, true);document.body.addEventListener("click",onclickfunction, true); 

  第三个是一个布尔值，true表示指定的事件处理函数在捕获阶段执行，false表示在冒泡阶段。
  两者第一个参数， 事件名称不一样，detachEvent用的是onclick, removeEventListener用的是click，没有'on'。
  两者可对执行的优先级不一样。

btn1Obj.attachEvent("onclick",method1);btn1Obj.attachEvent("onclick",method2);btn1Obj.attachEvent("onclick",method3);

  执行顺序为method3->method2->method1

  如果是Mozilla系列，并不支持该方法，需要用到addEventListener var btn1Obj =

btn1Obj.addEventListener("click",method1,false);btn1Obj.addEventListener("click",method2,false);btn1Obj.addEventListener("click",method3,false);

  执行顺序为method1->method2->method3

2.关于window.event
在Firefox中没有window.event变量，他的事件变量必须通过参数传输.
如果想获取事件的元素在IE中通过event.srcElement，但是在FF中得用e.target.
以下是例子：

input.addEventListener("click",test,false);function test(e){var e = window.event||e;var srcElement = e.srcElement || e.target；}

<input onclick="test(event)">

3.eval() 与 window.execScript()]
  1. 在 FireFox 下 window.execScript() 函数不能运行，而 eval() 在两个浏览器下都能正常运行；
  2. window.execScript() 所执行后的脚本上文是针对整个全局域的，而 eval() 对字符串脚本执行的上下文只针对于调用 eval 函数本身的上下文；
  如果在任何执行eval的上下文中将变量直接定义成 window 下的某个“属性”即可成为全局变量。例如：

function test() { eval("window.a = '全局变量';"); eval("window.b = function(){alert('全局函数');}"); }

4.关于解析xml文件(此方法为转载)
由于Firefox的XMLDocument对象没有loadXML，selectNodes，selectSingleNode的方法，Element对象也没有selectNodes，selectSingleNode的方法。所以我们更改他们的原型，增加相应的方法。由于创建XMLDocument的方法也不相同，所以增加方法createXMLDoc来创建XMLDocument。获取元素值的方法也不同，所以增加getElementValue方法。

var  isIE  =   document.all && window.external;function createXMLDoc(){    var xmlDoc;    var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined');    var ie = (typeof window.ActiveXObject != 'undefined');    if (moz) {        xmlDoc = document.implementation.createDocument("", "", null);    }    else         if (ie) {            xmlDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");            xmlDoc.async = false;            while (xmlDoc.readyState != 4) {            };                    }    return xmlDoc;}function getElementValue(item){if(isIE){return item.text;}else{return item.childNodes[0].nodeValue;}}if ( ! isIE){      XMLDocument.prototype.loadXML = function(xmlString)     {        var childNodes = this.childNodes;        for (var i = childNodes.length - 1; i >= 0; i--)            this.removeChild(childNodes[i]);        var dp = new DOMParser();        var newDOM = dp.parseFromString(xmlString, "text/xml");        var newElt = this.importNode(newDOM.documentElement, true);        this.appendChild(newElt);     };    // check for XPath implementation    if( document.implementation.hasFeature("XPath", "3.0") )     {       // prototying the XMLDocument        XMLDocument.prototype.selectNodes = function(cXPathString, xNode)        {          if( !xNode ) { xNode = this; }           var oNSResolver = this.createNSResolver(this.documentElement)          var aItems = this.evaluate(cXPathString, xNode, oNSResolver,                         XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)          var aResult = [];  aResult.length = aItems.snapshotLength;          for( var i = 0; i < aItems.snapshotLength; i++)           {              aResult[i] =   aItems.snapshotItem(i);           }   aResult.item=function(index){   return aResult[index]   }          return aResult;        }       // prototying the Element        Element.prototype.selectNodes = function(cXPathString)        {          if(this.ownerDocument.selectNodes)           {             return this.ownerDocument.selectNodes(cXPathString, this);           }          else{throw "For XML Elements Only";}        }// prototying the XMLDocument        XMLDocument.prototype.selectSingleNode = function(cXPathString, xNode)        {          if( !xNode ) { xNode = this; }           var xItems = this.selectNodes(cXPathString, xNode);          if( xItems.length > 0 )           {             return xItems[0];           }          else           {             return null;           }        }              // prototying the Element        Element.prototype.selectSingleNode = function(cXPathString)        {              if(this.ownerDocument.selectSingleNode)           {             return this.ownerDocument.selectSingleNode(cXPathString, this);           }          else{throw "For XML Elements Only";}        }     }}

5.自定义属性：
  在IE中支持自Name，但是在FF中它不支持，只能通过classname和id来区分对象。在IE中支持直接访问定义属性， 比如input.thirdValue，但是在FF中需要通过getAttribute("thirdValue")来访问。
6.支持的语言
  在IE中经常有写JScript， 或者VBScript但是在FF中只支持JavaScript
7.文字旋转：
  IE：filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
     rotation(0、1、2或3，对应着将元素旋转0、90、180或270度)
  FF：-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
position:absolute;
right:-30px;
top:350px;
    position 必须是abslute，必要时需要调整right和top，如果出现滚动条需要重新计算位置
8：onbeforeunload事件的处理
  在IE中如果想在关闭页面之前弹出提示消息，需要设置事件的返回值，event.returnValue="您是否要离开？",但是在FF中由于event不是全局变量所以此方法不好使，一种方法是在声明时间的时候传入event，另外一种是直接返回需要显示的字符，return "您是否要离开？"。如果使用了JQuery则很方便。

<body onbeforeunload="onbeforeunload(event);"></body>

funciton onbeforeunload(e){var e = window.event||e;e..returnValue = "您是否要离开？";}

$(window).bind("beforeunload",function(event){    event.originalEvent.returnValue = "您是否要离开？";    });

8.FF不支持insertAdjacentElement 方法，需要对Element的原型做如下修改

if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){?HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)?{??switch (where){??case 'beforeBegin':???this.parentNode.insertBefore(parsedNode,this)???break;??case 'afterBegin':???this.insertBefore(parsedNode,this.firstChild);???break;??case 'beforeEnd':???this.appendChild(parsedNode);???break;??case 'afterEnd':???if (this.nextSibling) ???{????this.parentNode.insertBefore(parsedNode,this.nextSibling);???}???else ???{????this.parentNode.appendChild(parsedNode);???}???break;??}?}?HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr)?{??var r = this.ownerDocument.createRange();??r.setStartBefore(this);??var parsedHTML = r.createContextualFragment(htmlStr);??this.insertAdjacentElement(where,parsedHTML)?}?HTMLElement.prototype.insertAdjacentText = function(where,txtStr)?{??var parsedText = document.createTextNode(txtStr)??this.insertAdjacentElement(where,parsedText)?}}

查看更多 下一篇