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)?}}