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;

}

HTML代码:

<input onclick="test(event)">

3.eval() 与 window.execScript()]

a. 在 FireFox 下 window.execScript() 函数不能运行,而 eval() 在两个浏览器下都能正常运行;

b. 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则很方便。

HTML代码:

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

</body>

JS代码:

funciton onbeforeunload(e){

var e = window.event||e;

e..returnValue = "您是否要离开?";

}

Jquery代码:

$(window).bind("beforeunload",function(event){

event.originalEvent.returnValue = "您是否要离开?";

});

9.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)

}

}

原文:http://birdwindy.iteye.com/blog/562845