FIREFOX/IE跨浏览器开发备忘

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

１、判断浏览器

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

２、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()方法。

1. function loadConfigXml(urlXml)
2. {
3.     try{    
4.         if(document.implementation && document.implementation.createDocument){
5.             var Xmlhttp = new XMLHttpRequest();   
6.             var dom = document.implementation.createDocument("","",null);
7.             Xmlhttp.open("GET",urlXml,false);
8.             Xmlhttp.setRequestHeader("Content-Type","text/xml");
9.             Xmlhttp.send(null);
10.             parser=new DOMParser(); 
11.             dom = parser.parseFromString(Xmlhttp.responseText,"text/xml");
12.             return dom;
13.         }else if(typeof window.ActiveXObject != 'undefined') {      
14.             var Xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
15.             var dom=new ActiveXObject("Msxml2.DOMDOCUMENT");
16.             Xmlhttp.open("GET",urlXml,false);
17.             Xmlhttp.setRequestHeader("Content-Type","text/xml");
18.             Xmlhttp.send();     
19.             dom.loadXML(Xmlhttp.responseText);
20.             return dom;
21.         }
22.     } catch(e){
23.         alert(e.description);
24.     }
25. }
27. //使FIREFOX支持selectNodes()、selectSingleNode()
28. //代码出处：http://km0ti0n.blunted.co.uk/mozXPath.xap
29. // check for XPath implementation
30. if( document.implementation.hasFeature("XPath", "3.0") )
31. {
32.     // prototying the XMLDocument
33.     XMLDocument.prototype.selectNodes = function(cXPathString, xNode)
34.     {
35.         if( !xNode ) { xNode = this; } 
36.         var oNSResolver = this.createNSResolver(this.documentElement)
37.         var aItems = this.evaluate(cXPathString, xNode, oNSResolver, 
38.         XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
39.         var aResult = [];
40.         for( var i = 0; i < aItems.snapshotLength; i++)
41.         {
42.             aResult[i] = aItems.snapshotItem(i);
43.         }
44.         return aResult;
45.     }
47.     // prototying the Element
48.     Element.prototype.selectNodes = function(cXPathString){
49.         if(this.ownerDocument.selectNodes){
50.           return this.ownerDocument.selectNodes(cXPathString, this);
51.         }else{
52.             throw "For XML Elements Only";
53.         }
54.     }
55. }
56.     
57.     // check for XPath implementation
58. if( document.implementation.hasFeature("XPath", "3.0")){
59.     // prototying the XMLDocument
60.     XMLDocument.prototype.selectSingleNode = function(cXPathString, xNode){
61.         if( !xNode ){
62.             xNode = this;
63.         } 
64.         var xItems = this.selectNodes(cXPathString, xNode);
65.         if( xItems.length > 0 ){
66.             return xItems[0];
67.         }else{
68.             return null;
69.         }
70.     }
71.     
72.     // prototying the Element
73.     Element.prototype.selectSingleNode = function(cXPathString){ 
74.         if(this.ownerDocument.selectSingleNode){
75.             return this.ownerDocument.selectSingleNode(cXPathString, this);
76.         }else{
77.             throw "For XML Elements Only";
78.         }
79.     }
80. }
83. //使fireFox也支持xmlDom.xml
84. if(!document.all)
85.     Node.prototype.__defineGetter__
86.     (
87.         "xml",
88.         function()
89.         {
90.             return (new XMLSerializer).serializeToString(this);
91.         }
92.     );

以上方法在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节点是否为空节点并给空节点赋值

1. xmlDoc = loadConfigXml("order.xml");
3. if(document.implementation && document.implementation.createDocument){//FIREFOX
4.     var c = xmlDoc.getElementsByTagName("ORDERNO")[0];
5.     if((typeof c.childNodes[0])=='undefined'){
6.         var newtext = xmlDoc.createTextNode("");
7.         c.appendChild(newtext);
8.     } 
9.         alert(c.childNodes[0].nodeValue);　//这里打印的值为空
10.         c.childNodes[0].nodeValue = "8888"; //赋值
11.         alert(c.childNodes[0].nodeValue);　//这里打印的值为"8888"
13. }else if(typeof window.ActiveXObject != 'undefined') {//IE
14. 　//selectSingleNode方式
15. 　/** 
16. 　var c = xmlDoc.selectSingleNode("/ORDER/ORDERNO").text;
17.     alert(c);
18.     if(c==''){
19.         c="8888";
20.     }
21.     alert(c);
22. 　**/
24. 　//getElementsByTagName方式
25.     var c = xmlDoc.getElementsByTagName("ORDERNO").item(0);
26.     alert(c.text);
27.     if(c.text==''){
28.         c.text="8888";
29.     }
30.     alert(c.text);
31. }