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

问题描述 投票：0回答：1

我想用MS Internet Explorer的JavaScript和XMLDOM用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>
javascript xml internet-explorer xslt xmldom
1个回答
0
投票

根据你的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对象和transform()方法来转换XML文档。如果使用Edge或Chrome浏览器，我们可以使用 XSLTProcessor对象 来转换XML文档（查看 XSLTProcessor基本实例). 请检查以下示例代码。

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>

IE11的输出。

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.