兼容IE Chrome的XMLDOM的JS加载、遍历、取值方式

  习惯在IE下操作XMLDOM的各种方式,结果在Chrome和FF下都用不了ORZ.....这不是坑爹么。
下面以chrome为例处理一下兼容性= =!!

//检测系统支持的XMLDom方式
function E_getControlPrefix() {
  var prefixes = ["MSXML2", "Microsoft", "@Microsoft", "MSXML", "MSXML3"];
  var o, o2;
  for (var i = 0; i < prefixes.length; i++) {
    try {
      // try to create the objects
      o = new ActiveXObject(prefixes[i] + ".XmlHttp");
      o2 = new ActiveXObject(prefixes[i] + ".XmlDom");
      return E_getControlPrefix.prefix = prefixes[i];
    }
    catch (ex) { };
    }
  }
//创建xmldom对象
function loadXmlFile(xmlFile) {
  var xmlDom = null;
  try{
    if (window.ActiveXObject) { //支持IE浏览器,可跨域
      xmlDom = new ActiveXObject(E_getControlPrefix() + ".XMLDOM");
      //xmlDom.loadXML(xmlFile);//如果用的是XML字符串
      xmlDom.async = false;
      xmlDom.loadXML(xmlFile); //如果用的是xml文件。
      return xmlDom;
    } else if (document.implementation && document.implementation.createDocument) { //支持火狐浏览器,可跨域
      xmlDom = document.implementation.createDocument("", "", null);
      //xmlDom.async = false;
      xmlDom.load(xmlFile);
      return xmlDom;
    }
  }
  catch (ex) {}

  try{
    //xmlhttp方式,支持火狐、chrome、oprea等浏览器,但不可跨域
    var xmlhttp = new window.XMLHttpRequest();
    xmlhttp.open("GET", xmlFile, false);
    xmlhttp.send(null);
    if (xmlhttp.status == 200) {
      xmlDom = xmlhttp.responseXML;
    }
    else {
      //传入的是XML字符串而非XML地址时非IE浏览器处理
      var parseXml = new DOMParser();
      var xmlDom = parseXml.parseFromString(xmlFile, "text/xml");
    }
  }
  catch (ex) {
    //传入的是XML字符串而非XML地址时非IE浏览器处理
    var parseXml = new DOMParser();
    var xmlDom = parseXml.parseFromString(xmlFile, "text/xml");
  }
  return xmlDom;
}

  OK 我们现在终于可以在chrome中加载XMLDOM文档了。不过别高兴的太早,问题还在后面呢。。。
我们在chrome中遍历一个XMLDOM文档,会出现如下问题。。。
  1.text属性取不到值。。。被坑死了
  2.childNode数量比IE下多。。。。彻底服了
  3.无法使用selectNode和selectSingleNode方法
下面我们来一个一个的解决他们
  1.text属性取不到值

function GetXmlText(node) {
  if (node.text != undefined)
    return node.text;
  else
    return node.textContent;
}

//也可以使用prototype封装到node的对象上。。这里就不做多的阐述了。。

  2.childNode数量比IE下多
  一个不同的root节点下IE下只有2个节点,Chrome下缺有5个。。。
处理办法 通过判断不同浏览器或者节点数量来修改自己的逻辑代码(具体的节点位置请根据实际情况自己判断)

  3.无法使用selectNode和selectSingleNode方法

function selectSingleNode(node, xpath) {
  if (!window.ActiveXObject) {
    var x = selectNodes(node, xpath)
    if (!x || x.length < 1) return null;
      return x[0];
    }
    else {
      return node.selectSingleNode(xpath);
    }
  }
function selectNodes(node, xpath) {   if (!window.ActiveXObject) {     var xpe = new XPathEvaluator();     var nsResolver = xpe.createNSResolver(node.ownerDocument == null ?     node.documentElement : node.ownerDocument.documentElement);     var result = xpe.evaluate(xpath, node, nsResolver, 0, null);     var found = [];     var res;     while (res = result.iterateNext())       found.push(res);       return found;
  }   
else {     return node.selectNodes(xpath);   } }
posted @ 2017-11-03 15:24  晒晒  阅读(1241)  评论(0)    收藏  举报