FIREFOX/IE跨浏览器开发备忘

在客户这边解决B2C项目的FIREFOX/IE跨浏览器问题已经一个多月了，感觉FIREFOX比IE严谨很多，书写的代码需完全遵循W3C标准。现整理一下开发笔记，并不定期进行更新。

１、判断浏览器

1. • if(document.implementation && document.implementation.createDocument){
   • 　　//firefox code
   • }else if(typeof window.ActiveXObject != 'undefined') {
   • 　　//ie code
   • }

２、input自定义属性的取值与赋值

　IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.

　<input type="text" id="test" flag="" />

　取值：

　IE可以通过document.getElementById("test").flag或document.getElementById("test").getAttribute("flag")取值。

　FIREFOX必需通过document.getElementById("test").getAttribute("flag")才能取值。

　赋值：

　IE可以通过document.getElementById("test").flag="cool"或document.getElementById("test").setAttribute("flag","cool")

　FIREFOX必需通过document.getElementById("test").setAttribute("flag","cool")才能赋值。

３、XML的加载方式

　a）加载xml文件：

　IE:

1. xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
2. xmlDoc.async="false";
3. xmlDoc.load("books.xml");

　FIREFOX:

1. xmlDoc=document.implementation.createDocument("","",null);
2. xmlDoc.async="false";
3. xmlDoc.load("books.xml");

　b）加载xml字符串：

　IE:

1. xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
2. xmlDoc.async="false";
3. xmlDoc.loadXML(txt);

　FIREFOX:

1. parser=new DOMParser();
2. xmlDoc=parser.parseFromString(txt,"text/xml");　

４、目前正在用的一个公共js脚本，此脚本从网络收集，自己整理了一下。

功能包括：使FIREFOX支持selectNodes()、selectSingleNode()以及xmlDom.xml()方法。
function loadConfigXml(urlXml) { try{ if(document.implementation && document.implementation.createDocument){ var Xmlhttp = new XMLHttpRequest(); var dom = document.implementation.createDocument("","",null); Xmlhttp.open("GET",urlXml,false); Xmlhttp.setRequestHeader("Content-Type","text/xml"); Xmlhttp.send(null); parser=new DOMParser(); dom = parser.parseFromString(Xmlhttp.responseText,"text/xml"); return dom; }else if(typeof window.ActiveXObject != 'undefined') { var Xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); var dom=new ActiveXObject("Msxml2.DOMDOCUMENT"); Xmlhttp.open("GET",urlXml,false); Xmlhttp.setRequestHeader("Content-Type","text/xml"); Xmlhttp.send(); dom.loadXML(Xmlhttp.responseText); return dom; } } catch(e){ alert(e.description); } } //使FIREFOX支持selectNodes()、selectSingleNode() //代码出处：http://km0ti0n.blunted.co.uk/mozXPath.xap // 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 = []; for( var i = 0; i < aItems.snapshotLength; i++) { aResult[i] = aItems.snapshotItem(i); } 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"; } } } // check for XPath implementation if( document.implementation.hasFeature("XPath", "3.0")){ // 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"; } } } //使fireFox也支持xmlDom.xml if(!document.all) Node.prototype.__defineGetter__ ( "xml", function() { return (new XMLSerializer).serializeToString(this); } );

以上方法在FIREFOX与IE环境下的使用方法相同，都是用 loadConfigXml("order.xml")加载一个xml文件，根据不同的浏览器返回一个xmlDom对象，然后就可以调用 selectNodes()、selectSingleNode()、xml()方法。只是selectSingleNode()方法在使用时的写法不一样。

以下代码都是取ORDERNO节点的值：

IE：

1. xmlDom.selectSingleNode("/ORDER/ORDERNO").text;

fireFox:

1. xmlDom.selectSingleNode("/ORDER/ORDERNO/text()").nodeValue;

用getElementsByTagName()方法取ORDERNO节点的值：

IE：

1. xmlDoc.getElementsByTagName("ORDERNO").item(0).text

fireFox:

1. xmlDoc.getElementsByTagName("ORDERNO")[0].childNodes[0].nodeValue;

用getElementsByTagName()方法需要注意的是，如果ORDERNO节点为空节点即<ORDERNO/>时，以上IE的用法不会报错，而fireFox中会因为ORDERNO节点没有childNodes报错(报"undefined"错误);

５、判断XML节点是否为空节点并给空节点赋值
xmlDoc = loadConfigXml("order.xml"); if(document.implementation && document.implementation.createDocument){//FIREFOX var c = xmlDoc.getElementsByTagName("ORDERNO")[0]; if((typeof c.childNodes[0])=='undefined'){ var newtext = xmlDoc.createTextNode(""); c.appendChild(newtext); } alert(c.childNodes[0].nodeValue);　//这里打印的值为空 c.childNodes[0].nodeValue = "8888"; //赋值 alert(c.childNodes[0].nodeValue);　//这里打印的值为"8888" }else if(typeof window.ActiveXObject != 'undefined') {//IE 　//selectSingleNode方式 　/** 　var c = xmlDoc.selectSingleNode("/ORDER/ORDERNO").text; alert(c); if(c==''){ c="8888"; } alert(c); 　**/ 　//getElementsByTagName方式 var c = xmlDoc.getElementsByTagName("ORDERNO").item(0); alert(c.text); if(c.text==''){ c.text="8888"; } alert(c.text); }

本文转自stephen.jiang的博客