Fatal编程技术网
  • javascript/
  • Javascript MicrosoftEdge和Internet Explorer浏览器中未加载XSLT和XML内容问题

Javascript MicrosoftEdge和Internet Explorer浏览器中未加载XSLT和XML内容问题

javascript html ajax xml xslt

Javascript MicrosoftEdge和Internet Explorer浏览器中未加载XSLT和XML内容问题,javascript,html,ajax,xml,xslt,Javascript,Html,Ajax,Xml,Xslt,我注意到，下面的JavaScript代码似乎没有将任何XML或XSLT数据从相应的文件加载到Internet Explorer或Microsoft Edge浏览器中，我不确定我写错了什么 下面是我用来加载内容的两个JavaScript函数 function loadXMLDoc(filename) { if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }

我注意到，下面的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。

考虑到当前版本的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>
在Windows 10上使用当前版本的IE、Edge、Chrome和Firefox的在线示例位于

正在运行的代码段是

函数loadDoc（url）{
返回新承诺（函数（解析）{
var req=新的XMLHttpRequest（）；
请求打开（“获取”，url）；
if（XSLTProcessor的类型=='undefined'）{
试一试{
req.responseType='msxml文档'；
}
捕获（e）{}
}
req.onload=函数（）{
解析（this.responseXML）
}
请求发送（）；
});
}
函数转换（xmlUrl、xslUrl、xsltParams、targetElement）{
所有（[loadDoc（xmlUrl），loadDoc（xslUrl）]）。然后（函数（数据）{
var xmlDoc=数据[0]；
var xslDoc=数据[1]；
if（XSLTProcessor的类型！==“未定义”）{
var proc=new XSLTProcessor（）；
过程导入样式表（xslDoc）；
for（xsltParams中的var prop）{
proc.setParameter（null，prop，xsltParams[prop]）；
}
var resultFrag=proc.transformToFragment（xmlDoc，targetElement.ownerDocument）；
targetElement.textContent=''；
targetElement.appendChild（resultFrag）；
}
否则{
var-template=newActiveXObject（'Msxml2.XslTemplate.6.0'）；
template.stylesheet=xslDoc；
var proc=template.createProcessor（）；
for（xsltParams中的var prop）{
proc.addParameter（prop，xsltParams[prop]）；
}
proc.input=xmlDoc；
proc.transform（）；
var resultHTML=过程输出；
targetElement.innerHTML=resultHTML；
}
});
}
document.addEventListener（'DOMContentLoaded'，function（）{
变换（'http://home.arcor.de/martin.honnen/cdtest/test2016081501.xml', 'http://home.arcor.de/martin.honnen/cdtest/test2016081501.xsl“，{id:'test_value2'}，document.getElementById（'d1'）；
})

测试XSLT转换
嗯，Edge支持
XSLTProcessor
，如果您想编写代码来检查对该接口/对象的支持，那么您当然应该直接使用
if（typeof XSLTProcessor！==“undefined”）{//现在在这里使用XSLTProcessor}
而不是检查不相关的东西，如
document.implementation
并假设存在XSLT处理器。至于IE，你的目标是哪个版本的IE？如果（window.ActiveXObject）作为一个“浏览器是IE/Edge”的检查是无意义的，IE 11和Edge都不会为该检查提供true。对于Chrome、Firefox和Edge，您可以使用中使用的方法。 
<?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>