JavaScript XMLDOM XML XSL Internet Explorer - 我无法在浏览器中显示转换后的文件

Question

我正在尝试使用 JavaScript 和 XMLDOM 以及 MS Internet Explorer 使用 XSL 转换 XML 文件，但我无法使其工作。在IE的开发者工具中没有报错，但是没有文件显示。我在w3c之类的网站上搜索了几个小时，还是找不到答案。

这是我应该使用的代码：

<html>
<body>
    <script type=“text/javascript”>
        // Load the XML document
        var xml = new ActiveXObject(“Microsoft.XMLDOM”)
        xml.async = false
        xml.load(“myLibrary.xml”)
        // Load the XSL document
        var xsl = new ActiveXObject(“Microsoft.XMLDOM”)
        xsl.async = false
        xsl.load(“libraryStyle_v2.xsl”)
        //Do the transformation
        document.write(xml.transformNode(xsl))
    </script>
</body>
</html>

这是我使用的代码：

<!DOCTYPE html>
<html>
<body>
    <script type=“text/javascript”>
        // Load the XML document
        var xml = new ActiveXObject(“Microsoft.XMLDOM”)
        xml.async = false
        xml.load(“travelDiaries.xml”)
        // Load the XSL document
        var xsl = new ActiveXObject(“Microsoft.XMLDOM”)
        xsl.async = false
        xsl.load(“travelDiaries.xsl”)
        //Do the transformation
        document.write(xml.transformNode(xsl))
    </script>
</body>
</html>

我不确定我做错了什么。我不应该使用与上面不同的代码（除了一些小的变化）

这是我的 XML 文件代码：

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="travelDiaries.xsl" type="text/xsl"?>
<diaries>
    <diary name='Wojciech'>
          <entry date='2020/06/12' title='Poland'>
            <location>Poland</location>
            <description>Trip to see the, family and friends in a home town</description>
            <img></img>
         </entry>
    </diary>

    <diary name='Karolina'>
        <entry date='2018/04/12' title='Poland'>
            <location>Poland</location>
            <description>Trip for site visiting, visiting a Capital city of Poland - Warsaw </description>
            <img></img>
        </entry>
    </diary>

     <diary name='Kuba'>
          <entry date='2019/03/02' title='Czech republic'>
            <location>Czech republic</location>
            <description>Visiting the Old Praque with friends, seeing most popular sites</description>
            <img></img>
         </entry>
    </diary>

     <diary name='Kevin'>
          <entry date='2020/11/08' title='Usa'>
            <location>Usa</location>
            <description>Traveling around different states, meeting people and learning about the culture</description>
            <img></img>
         </entry>
    </diary>
</diaries>

和我的 XSL 代码：

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/diaries">
        <html>
            <body>
                <table border="5">
                    <tr bgcolor="lawngreen">
                        <th>Date</th>
                        <th>Location</th>
                        <th>Description</th>
                        <th>Image</th>
                    </tr>
                <xsl:for-each select="diary/entry">
                 <xsl:sort select="@date" order="descending"/>
                        <tr>
                            <td>
                                <xsl:value-of select="@date"/>
                            </td>
                            <td>
                                <xsl:value-of select="location"/>
                            </td>
                            <td>
                                <xsl:value-of select="description"/>
                            </td>
                            <td>
                                <img border="1" width="100px" height="100px">
                                    <xsl:attribute name="src">
                                <xsl:value-of select="img"/>
                                    </xsl:attribute>
                                </img>
                            </td>
                        </tr>
                </xsl:for-each>
                </table>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Answer 1

根据你的xml文件内容，我修改了XML文件和XSLT文件如下：

XML 文件（将扩展名从 .xsl 更改为 .xslt）：

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="travelDiaries.xslt" type="text/xsl"?>

travelDiaries.xslt 文件:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
      <body>
        <h2>Data collection</h2>
        <table border="1">
          <tr bgcolor="#9acd32">
            <th>Date</th>
            <th>Location</th>
            <th>Description</th>
          </tr>
          <xsl:for-each select="diaries/diary">
            <xsl:sort select="entry/@date" order="descending"/>
            <tr>
              <td>
                <xsl:value-of select="entry/@date"/>
              </td>
              <td>
                <xsl:value-of select="entry/location"/>
              </td>
              <td>
                <xsl:value-of select="entry/description"/>
              </td> 
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

然后，在Html页面中，如果使用IE浏览器，我们可以使用ActiveXObject object and the transform() method to transform the XML document, if using Edge or Chrome browser, we could use the XSLTProcessor object to transform the XML document (check the XSLTProcessor Basic Example)。请检查以下示例代码：

Html 页数：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="example">

    </div>
    <script>  
        var xml;
        var xsl;

        function loadXMLDoc(filename) {
            if (window.ActiveXObject || "ActiveXObject" in window) {
                xhttp = new ActiveXObject("Msxml2.XMLHTTP");
            } else {
                xhttp = new XMLHttpRequest();
            }
            xhttp.open("GET", filename, false);
            xhttp.send("");
            return xhttp.responseXML;
        }


        if (window.ActiveXObject || "ActiveXObject" in window) {
            ie();
        } else {

            xml = loadXMLDoc("XMLPage.xml");
            xsl = loadXMLDoc("travelDiaries.xslt");

            if (typeof XSLTProcessor !== 'undefined') {
                xsltProcessor = new XSLTProcessor();
                xsltProcessor.importStylesheet(xsl);
                resultDocument = xsltProcessor.transformToDocument(xml, document);

                var serializer = new XMLSerializer();
                var transformed = serializer.serializeToString(resultDocument.documentElement);

                //console.log(transformed);
                document.getElementById("example").innerHTML = transformed;
            }
        }

        // https://msdn.microsoft.com/en-us/library/ms753809(v=vs.85).aspx
        function ie() {

            var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
            var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
            var xslProc;
            xslDoc.async = false;
            xslDoc.load("travelDiaries.xslt");
            if (xslDoc.parseError.errorCode != 0) {
                var myErr = xslDoc.parseError;
                alert("You have error " + myErr.reason);
            } else {
                xslt.stylesheet = xslDoc;
                var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
                xmlDoc.async = false;
                xmlDoc.load("XMLPage.xml");
                if (xmlDoc.parseError.errorCode != 0) {
                    var myErr = xmlDoc.parseError;
                    alert("You have error " + myErr.reason);
                } else {
                    xslProc = xslt.createProcessor();
                    xslProc.input = xmlDoc;
                    xslProc.addParameter("param1", "Hello");
                    xslProc.transform();
                    //console.log(result);
                    var result = xslProc.output;       
                    if (result !== undefined) {
                        document.getElementById("example").innerHTML = result;
                    }
                }
            }
        }
    </script>
</body>
</html>

IE 11 输出：

JavaScript XMLDOM XML XSL Internet Explorer - 我无法在浏览器中显示转换后的文件

JavaScript XMLDOM XML XSL Internet explorer - I cant display transformed file in the browser

javascript

xml

xslt

internet-explorer

xmldom