Question

我注意到以下JavaScript代码似乎没有将任何XML或XSLT数据从其相应的文件加载到Internet Explorer或Microsoft Edge浏览器中，我不确定我写错了什么。

以下是我用来加载内容的两个JavaScript函数..

function loadXMLDoc(filename) {
    if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else {
        xhttp = new XMLHttpRequest();
    }
    xhttp.open("GET", filename, false);
    try {
        xhttp.responseType = "msxml-document"
    } catch (err) {
    } // Helping IE11
    xhttp.send("");
    return xhttp.responseXML;
}

function displayXMLDoc(xml_file, xsl_file, element_id) {
    xml = loadXMLDoc(xml_file);
    xsl = loadXMLDoc(xsl_file);

    // BROWSER IS IE / EDGE.
    if (window.ActiveXObject) {
        ex = xml.transformNode(xsl);
        document.getElementById(element_id).innerHTML = ex;
    }
    else if (document.implementation && document.implementation.createDocument) {
        var xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);
        var resultDocument = xsltProcessor.transformToFragment(xml, document);
        document.getElementById(element_id).appendChild(resultDocument);
    }
}

以下是这些函数的调用方式......

<body onload="displayXMLDoc('myfile.xml', 'myfile.xsl', 'myoutput');">

请注意：

该代码目前适用于所有其他浏览器，例如FireFox和Chrome。

Answer 1

考虑到当前版本的Edge，Chrome和Firefox支持Promise这一天的一种方法是使用库在IE中获得Promise支持，这样使用promises来处理异步加载XML和XSLT文档。这样，加载XML文档和XSLT文档并应用XSLT转换来获取HTML结果的代码，以及设置一些XSLT参数的选项，如下所示：

 function loadDoc(url) {
       return new Promise(function(resolve) {
         var req = new XMLHttpRequest();
         req.open("GET", url);
         if (typeof XSLTProcessor === 'undefined') {
           try {
             req.responseType = 'msxml-document';
           }
           catch (e) {}
         }
         req.onload = function() {
           resolve(this.responseXML)
         }
         req.send();
       });
  }

  function transform(xmlUrl, xslUrl, xsltParams, targetElement) {
    Promise.all([loadDoc(xmlUrl), loadDoc(xslUrl)]).then(function(data) {
      var xmlDoc = data[0];
      var xslDoc = data[1];

      if (typeof XSLTProcessor !== 'undefined') {
        var proc = new XSLTProcessor();
        proc.importStylesheet(xslDoc);

        for (var prop in xsltParams) {
          proc.setParameter(null, prop, xsltParams[prop]);
        }

        var resultFrag = proc.transformToFragment(xmlDoc, targetElement.ownerDocument);

        targetElement.textContent = '';
        targetElement.appendChild(resultFrag);
      }
      else {
          var template = new ActiveXObject('Msxml2.XslTemplate.6.0');
          template.stylesheet = xslDoc;
          var proc = template.createProcessor();

          for (var prop in xsltParams) {
            proc.addParameter(prop, xsltParams[prop]);
          }

          proc.input = xmlDoc;

          proc.transform();

          var resultHTML = proc.output;

          targetElement.innerHTML = resultHTML;
      }
    });
  }

然后可以将其称为

transform('file.xml', 'input.xsl', { ids : 'test_value2'}, document.getElementById('d1'));

其中第三个参数是一个Javascript对象，其中包含为XSLT样式表设置的任何参数，例如，如果XSLT是

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <!-- pass in a string with a single id value for the parameters ids or a '|' separated list of ids -->
    <xsl:param name="ids" select="''"/>

    <xsl:output method="html" indent="yes"/>

    <xsl:template match="/">

        <xsl:for-each select="products/test[$ids = '' or contains(concat('|', $ids, '|'), id)]">
            <a href="#"> Hello # <xsl:value-of select="value"/></a>
        </xsl:for-each>

    </xsl:template>
</xsl:stylesheet>

然后上面的Javascript片段设置了ids参数。

XML输入示例

<?xml version="1.0" encoding="UTF-8"?>
<products>

    <test>
        <id>test_value1</id>
        <value>1</value>
    </test>

    <test>
        <id>test_value2</id>
        <value>2</value>
    </test>

</products>

在Windows 10上使用当前版本的IE，Edge，Chrome和Firefox的在线示例位于https://martin-honnen.github.io/xslt/arcor-archive/2016/test2016081501.html。

正在运行的代码段是

      function loadDoc(url) {
           return new Promise(function(resolve) {
             var req = new XMLHttpRequest();
             req.open("GET", url);
             if (typeof XSLTProcessor === 'undefined') {
               try {
                 req.responseType = 'msxml-document';
               }
               catch (e) {}
             }
             req.onload = function() {
               resolve(this.responseXML)
             }
             req.send();
           });
      }
      
      function transform(xmlUrl, xslUrl, xsltParams, targetElement) {
        Promise.all([loadDoc(xmlUrl), loadDoc(xslUrl)]).then(function(data) {
          var xmlDoc = data[0];
          var xslDoc = data[1];
          
          if (typeof XSLTProcessor !== 'undefined') {
            var proc = new XSLTProcessor();
            proc.importStylesheet(xslDoc);
            
            for (var prop in xsltParams) {
              proc.setParameter(null, prop, xsltParams[prop]);
            }
            
            var resultFrag = proc.transformToFragment(xmlDoc, targetElement.ownerDocument);
            
            targetElement.textContent = '';
            targetElement.appendChild(resultFrag);
          }
          else {
              var template = new ActiveXObject('Msxml2.XslTemplate.6.0');
              template.stylesheet = xslDoc;
              var proc = template.createProcessor();
              
              for (var prop in xsltParams) {
                proc.addParameter(prop, xsltParams[prop]);
              }
              
              proc.input = xmlDoc;
              
              proc.transform();
              
              var resultHTML = proc.output;
              
              targetElement.innerHTML = resultHTML;
          }
        });
      }
      
      document.addEventListener('DOMContentLoaded', function() {
        transform('http://home.arcor.de/martin.honnen/cdtest/test2016081501.xml', 'http://home.arcor.de/martin.honnen/cdtest/test2016081501.xsl', { ids : 'test_value2'}, document.getElementById('d1'));
      })

<script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>

    <h1>Testing XSLT transformation</h1>
    <div id="d1"></div>

未在Microsft Edge和Internet Explorer浏览器中加载XSLT和XML内容问题

1 个答案: