IE和FF下读取XML文件

来源:互联网 发布:东方专制主义 知乎 编辑:程序博客网 时间:2024/06/02 23:27
IE和Firefox是当今最为流行的两大生产厂商,其各自对于css和javascript的操作个别地方存在着分歧,对于web开发的程序员来说,产品是面向所有浏览器的,也就是说我们开发的产品要确保在两种浏览器下都能够正常浏览.

        首先要判断客户使用的是那种类型的浏览器:

      var moz = (typeof document.implementation != 'undefined') && (typeof
document.implementation.createDocument != 'undefined'); 

//判断是否为mozilla浏览器
 var ie = (typeof window.ActiveXObject != 'undefined');

//判断是否为IE浏览器

分别为两种类型的浏览器定义XMLdoc对象

var Myxmldoc = function(){

     var xmldoc;

     if (moz) {
   xmldoc = document.implementation.createDocument("", "", null)
    
   } else if (ie) {
   xmldoc = new ActiveXObject("Microsoft.XMLDOM");
   xmldoc.async = false;
   while(xmldoc.readyState != 4) {};
    }

    return xmldoc;

   }

所有的操作都必须在XML完全装载后进行操作,对于ie中 while(xmldoc.readyState != 4) {}; 执行结束后文件就已经完全装载了对于FF浏览器提供了onload事件

两种浏览器下选择节点的方式也不一样,对于IE下可以使用selectSingleNode直接选中节点FF下使用getElementsByTagName选择节点,对于childNodes的结果两种浏览器下也是不一样的IE下的childNodes表示的只是<a></a>下级节点的个数,而FF下表示的是节点下面所有的子节点的值包括节点的文本值都会包含在其中

在使用typeof getElementsByTagName('root')选择根节点的输出会发现此返回结果并不是object对象而是一个html的集合对象下面为在FF和IE下操作XML的简单示例

XML文件:

<?xml version="1.0" encoding="gb2312"?>
<o>
 <file class="array">
  <e class="object">
   <id type="string">0</id>
   <name type="string">顶部广告测试1</name>
   <path type="string">topgg/1205557960578.jpg</path>
   <url type="string">
    recduc.jsp?type=1&amp;id=bc87d36b17aa754a0117aa7f1ec2000a
   </url>
  </e>
  <e class="object">
   <id type="string">1</id>
   <name type="string">顶部广告测试3</name>
   <path type="string">topgg/1205557949468.jpg</path>
   <url type="string">
    recduc.jsp?type=1&amp;id=bc87d36b17ab62f90117ab6407290004
   </url>
  </e>
  <e class="object">
   <id type="string">2</id>
   <name type="string">豪华铸造机</name>
   <path type="string">topgg/1205557943578.jpg</path>
   <url type="string">
    recduc.jsp?type=1&amp;id=bc87d16817b977020117b97842240007
   </url>
  </e>
  <e class="object">
   <id type="string">3</id>
   <name type="string">士大夫但是</name>
   <path type="string">topgg/1205557955156.jpg</path>
   <url type="string">
    recduc.jsp?type=1&amp;id=bc87d13e17ae95060117aef4d840004f
   </url>
  </e>
 </file>
</o>
输出每个节点的值:

 <script type="text/javascript">
    var moz = (typeof document.implementation != 'undefined')
    && (typeof document.implementation.createDocument != 'undefined');
    var ie = (typeof window.ActiveXObject != 'undefined');
    
   
    var Myxmldoc = function(){

     var xmldoc;

     if (moz) {
   xmldoc = document.implementation.createDocument("", "", null)
    
   } else if (ie) {
   xmldoc = new ActiveXObject("Microsoft.XMLDOM");
   xmldoc.async = false;
   while(xmldoc.readyState != 4) {};
    }

    return xmldoc;

   }

function getNodeList(xmldoc,tagname)
{
  var nodes = new Array();
  if(ie)
   {
   nodes = xmldoc.selectSingleNode('//'+tagname).childNodes;
  
   }else
   {
   var  allnodes = xmldoc.getElementsByTagName(tagname)[0].childNodes;
    for(var i=0;i<allnodes.length;i++)
    {
     if(allnodes[i].childNodes.length!=0&&allnodes[i].nodeName!=tagname)
     {
      nodes.push(allnodes[i]);
     }
    }
    
   }
   return nodes;
}

function getNodeValue(node,tagname)
{
 var nodevalue = '';
 if(ie)
 {
  var nodes = node.childNodes;
 for(var i=0;i<nodes.length;i++)
   {
   if(nodes[i].nodeName==tagname)
   {
    nodevalue = nodes[i].text;
    break;
   }
   }
 
 }else
 {
 var nodes = node.childNodes;
 for(var i=0;i<nodes.length;i++)
   {
   if(nodes[i].nodeName==tagname)
   {
   
    nodevalue = nodes[i].firstChild.nodeValue;
    break;
   }
   }
 
 }
return nodevalue;

}
    var xmldoc = new Myxmldoc();
    xmldoc.load('xml/topgg.xml');
    function printthevalue()
    {
    var list = getNodeList(xmldoc,'file');
    for(var i=0;i<list.length;i++)
    {
     document.write('id:'+getNodeValue(list[i],'id')+'<br>');
    document.write('name:'+getNodeValue(list[i],'name')+'<br>');
    document.write('path:'+getNodeValue(list[i],'path')+'<br>');
    document.write('url:'+getNodeValue(list[i],'url')+'<br>');
    }
    }
   if(ie)
   {
   printthevalue();
   }else
   {
   xmldoc.onload=function(){printthevalue();}
   }
    </script>

在IE和FF下运行效果如下所示:

id:0
name:顶部广告测试1
path:topgg/1205557960578.jpg
url:recduc.jsp?type=1&id=bc87d36b17aa754a0117aa7f1ec2000a
id:1
name:顶部广告测试3
path:topgg/1205557949468.jpg
url:recduc.jsp?type=1&id=bc87d36b17ab62f90117ab6407290004
id:2
name:豪华铸造机
path:topgg/1205557943578.jpg
url:recduc.jsp?type=1&id=bc87d16817b977020117b97842240007
id:3
name:士大夫但是
path:topgg/1205557955156.jpg
url:recduc.jsp?type=1&id=bc87d13e17ae95060117aef4d840004f