javascript - 使用 XSL 进行跨浏览器 XML 操作和解析(Chrome、Firefox 和 IE 8/11)

Question

我有一个表格，其中有 XML ，在用户填写表单时对其进行操作，并最终转换此操作 XML通过XSL 。我需要此解决方案在 Chrome、Firefox 和 Internet Explorer 8 至 11 中运行，无需兼容模式。

我用我在 IE 9(或者至少没有用户提示)、Chrome 和 Firefox 上成功运行的代码编写了一个 JSFiddle。但我在 IE 11 上遇到问题。当我的代码尝试执行 transformNode 时来自ActiveXObject 。我尝试了在多个网站(包括此处)中找到的一些建议，但有些建议根本不起作用，或者当我的代码尝试操作 XML 时开始抛出异常。 。因此，我需要帮助才能使此代码正常工作。

这是 JSFiddle:https://jsfiddle.net/mfedatto/6nsc5bf1/

HTML

<div id="wrapper"></div>
<div id="console"></div>

JavaScript

try {
  function getXmlDom(content) {
    var xmlDom;

    if (typeof window.DOMParser != "undefined") {
      trace.push("Creating DOMParser");

      xmlDom = (new window.DOMParser()).parseFromString(content, "text/xml");

      trace.push("DOMParser created");
    }
    else if (typeof window.ActiveXObject != "undefined" && new window.ActiveXObject("Microsoft.XMLDOM")) {
      try {
        trace.push("Creating MSXML2.DOMDocument.6.0");

        xmlDoc = new ActiveXObject("MSXML2.DOMDocument.6.0");

        trace.push("MSXML2.DOMDocument.6.0 created");
      }
      catch (ex) {
        trace.push("Creating Microsoft.XMLHTTP");

        xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");

        trace.push("Microsoft.XMLHTTP created");
      }

      xmlDom.async = "false";

      try { xmlDoc.responseType = "msxml-document"; } catch (ex) { }

      trace.push("Loading XML content");

      xmlDom.loadXML(content);

      trace.push("XML content loaded");
    }
    else {
      throw new Error("No XML parser found");
    }

    return xmlDom;
  }

  function xslTransformTo(xsl, xml, wrapper) {
    if ((window.ActiveXObject) || "ActiveXObject" in window) {
      trace.push("Transforming with ActiveXObject");

      wrapper.innerHTML = xml.transformNode(xsl);

      trace.push("Transformed with ActiveXObject");
    }
    else if (document.implementation && document.implementation.createDocument) {
      trace.push("Transforming with XSLTProcessor");

      xsltProcessor = new XSLTProcessor();

      xsltProcessor.importStylesheet(xsl);

      wrapper.appendChild(xsltProcessor.transformToFragment(xml, document));

      trace.push("Transformed with XSLTProcessor");
    }
    else {
      throw new Error("No XSL parser found");
    }
  }

  function xmlString(xml) {
    return (new XMLSerializer()).serializeToString(xml);
  }

  function showError(ex) {
    var console = document.getElementById("console");

    showTrace();

    console.appendChild(document.createTextNode("ERROR!!! " + ex.message));
  }

  function showTrace() {
    var console = document.getElementById("console");

    for (var i = 0; i < trace.length; i++) {
      console.appendChild(document.createTextNode(trace[i]));
      console.appendChild(document.createElement("br"));
    }
  }

  var trace = [];
  var strXml = "<root>\n"
             + "  <fc>\n"
             + "    <sc>\n"
             + "      <i />\n"
             + "      <i />\n"
             + "      <i />\n"
             + "      <i />\n"
             + "    </sc>\n"
             + "  </fc>\n"
             + "</root>";

  trace.push("XML string defined");

  var strXsl = "<xsl:stylesheet version=\"1.0\" xmlns:xsl=\"http://www.w3.org/1999/XSL/Transform\">\n"
             + "  <xsl:template match=\"/root\">\n"
             + "    <ul>\n"
             + "      <xsl:for-each select=\"fc/sc/i\">\n"
             + "        <li>[<xsl:value-of select=\"position()\" />]</li>\n"
             + "      </xsl:for-each>\n"
             + "    </ul>\n"
             + "  </xsl:template>\n"
             + "</xsl:stylesheet>";

  trace.push("XSL string defined");

  var strWrapperId = "wrapper";

  trace.push("Parsing XML");

  var xmlDoc = getXmlDom(strXml);

  trace.push("XML parsed");
  trace.push("Parsing XSL");

  var xslDoc = getXmlDom(strXsl);

  trace.push("XML parsed");

  var domWrapper = document.getElementById(strWrapperId);
  var xmlItemList = xmlDoc.getElementsByTagName("i");

  trace.push("All variables loaded");
  trace.push("Iterating item positions");

  try {
    for (var i = 0; i < xmlItemList.length; i++) {
      xmlItemList[i].setAttribute("p", i);
    }
  }
  catch (ex) {
    showError(ex);

    return;
  }

  trace.push("Itens positions iterared");
  trace.push("Transforming XML with XSL to wrapper");

  try {
    xslTransformTo(xslDoc, xmlDoc, domWrapper);
  }
  catch (ex) {
    showError(ex);

    return;
  }

  showTrace();
}
catch (ex) {
    alert(ex.message);
}

P.S.:与我使用的代码的唯一区别是跟踪和 loadXML基于字符串内容，事实上我使用 load具有可访问的方法 uri .

编辑 1 - 23/fev/16

我尝试运行JSFiddle Martin Honnen 在 IE 11 上发布，显示 ERROR!!! No XSL parser found 。我使用他建议的 MSDN 页面上的说明进行了一些重构。该文章指示尝试，而不是测试，因为某些插件可能会被实例化但未被检测到。这样我的 IE 11 创建并加载我的 XML和XSL使用 DOMParser 的对象和内容但无法同时使用 transformNode 进行转换和XSLTProcessor 。如:http://jsfiddle.net/mfedatto/6nsc5bf1/38 中所做的那样

编辑 2 - 25/fev/16

由于某种原因，该解决方案在 JSFiddle 上不起作用，我将对其进行一些挖掘。但有了 Martin Honnen 的回答，我可以加载我的外部 XML和XSL文件跨浏览器，包括 IE 11。这是我使用的最终代码:

function loadXmlFile(path) {
    var xmlDoc;

    if (loadXmlFile.cache === undefined) {
        loadXmlFile.cache =  { };
    }

    if (loadXmlFile.cache[path] === undefined) {
        try {
            xmlDoc = new ActiveXObject("MSXML2.DOMDocument.6.0");
        }
        catch (e) {
            try {
                xmlDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
            }
            catch (e2) {
                xmlDoc = new XMLHttpRequest();

                xmlDoc.responseType = "application/xml";
            }
        }

        try {
            xmlDoc.open("GET", path, false);
            xmlDoc.send();

            loadXmlFile.cache[path] = xmlDoc.responseXML;
        }
        catch (ex) {
            xmlDoc.async = false;
            xmlDoc.load(path);

            loadXmlFile.cache[path] = xmlDoc;
        }
    }

    return loadXmlFile.cache[path];
}

function xslTransformTo(xsl, xml, wrapper) {
    if (typeof xml.transformNode != "undefined") {
        wrapper.innerHTML = xml.transformNode(xsl);
    }
    else if (typeof XSLTProcessor != "undefined") {
        xsltProcessor = new XSLTProcessor();

        xsltProcessor.importStylesheet(xsl);

        wrapper.appendChild(xsltProcessor.transformToFragment(xml, document));
    }
}

Answer 1

参见https://msdn.microsoft.com/en-us/library/dn423948(v=vs.85).aspx ，在 IE 11 中，您需要在 try/catch 内使用 new ActiveXObject('program.id')，对 window 属性的检查不起作用。

此外，您在 IE 中使用 DOMParser 创建的 native IE DOM 文档不支持 transformNode，因此，如果您知道需要在 IE 中使用 XML DOM 文档来进行 XSLT 转换，那么您需要确保您使用 new ActiveXObject 创建了一个 MSXML DOM 文档，并且在尝试实例化 DOMParser 之前，您需要首先在代码中使用 try/catch 尝试执行此操作。

因此，对于从字符串进行 XML 解析，我将使用

  function getXmlDom(content) {
    var xmlDom;
    try {
      xmlDom = new ActiveXObject('Msxml2.DOMDocument.6.0');
      xmlDom.loadXML(content);
    }
    catch (e) {
        try {
        xmlDom = new ActiveXObject('Msxml2.DOMDocument.3.0');
        xmlDom.loadXML(content);
      }
      catch (e2) {
        xmlDom = (new DOMParser()).parseFromString(content, 'application/xml');
      }
    }

    return xmlDom;
  }

如http://home.arcor.de/martin.honnen/javascript/2016/test2016022301.html中所做的那样.