2

每个人！

我正在基于一些 xml 数据文件构建一个网站，所以我选择使用 XSLT 来绑定浏览器中的样式表。

起初它工作得很好，但最近，随着模板变得越来越复杂，发生了一些奇怪的事情。

我使用“copy-of”元素将数据复制到样式表中。这是代码：

<div class="section1">
    <xsl:copy-of select="article/bodydata/*" />
</div>

所以，基本上，我将“bodydata”节点的所有子元素复制到 <div /> 中。

但它不起作用。例如，我在 bodydata 中有一个 <img /> 元素，如果我在浏览器中访问 xml 文件，该图像不会出现。另一方面，如果我手动将“bodydata”元素复制到该 div 中，并将 .xsl 文件转换为 .html 文件，则该图像会显示出来。

所以，这是我的问题，我可以在浏览器中查看 xml 数据和 xsl 数据的组合输出吗？我需要任何扩展或什么？

以及关于可能出现什么问题的任何建议？我对 xslt 很陌生，所以我似乎误解了 XSLT 的真正作用。谢谢！

更新

为了说明这个问题，我写了一个小样本。

首先，我创建了一个示例 xml 数据文件：

<?xml version='1.0' encoding='utf-8'?>
<?xml-stylesheet type="text/xsl" href="article.xsl"?>
<article>
    <bodydata>
        <center>
            <img alt="sample" src="http://www.google.com/logos/classicplus.png" />
        </center>
        <p>
          <data class="tts_data">
          this is the paragraph.
          </data>
        </p>
        <p>
          <data class="tts_data">this is the second paragraph</data>
          <data class="tts_data">more data</data>
          <data class="tts_data">...</data>
        </p>
    </bodydata>
</article>

所以，你可以看到，“bodydata”元素中的所有节点都是需要在网页上显示的html元素。为了显示它，我创建了一个示例 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="/">
      <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <meta name="robots" content="noindex" />
        </head>
        <body>
          <article>
           <header>
                  header of the article
               </header>
               <section>
                  <xsl:copy-of select="article/bodydata/*" />
           </section>
      </article>
          <footer>
          footer part of the page
          </footer>
        </body>
     </html>
    </xsl:template>
</xsl:stylesheet>

结果是这样 xslt 结果 的：img 元素就这样消失了。

接下来，我将 bodydata 元素复制到部分部分，并形成了一个新的 html 文件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="noindex" />
</head>
<body>
  <article>
    <header>
     header of the article
    </header>
    <section>
      <center>
        <img alt="sample" src="http://www.google.com/logos/classicplus.png" />
      </center>
      <p>
        <data class="tts_data">
        this is the paragraph.
        </data>
      </p>
      <p>
        <data class="tts_data">
        this is the second paragraph, 
        </data>
        <data class="tts_data">
        more data
        </data>
        <data class="tts_data">...</data>
      </p>
  </section>
    </article>
    <footer>
    footer part of the page
    </footer>
  </body>
</html>

这里的结果是： html文件的结果 图像出现了。

所以我想知道这里有什么问题。

4

2 回答 2

3

考虑向我们展示最小但完整的示例来演示问题，否则很难说清楚。xsl:copy-of听起来对我来说是正确的方法，假设bodydata元素具有 HTML 元素作为子元素。至于查看转换结果，现在大部分浏览器都自带开发工具（或者你可以安装类似Firebug的工具），然后你可以在浏览器中按F12查看文档的DOM树来查看结果。至于复制到结果树的元素没有显示出来，通常可能是名称空间问题（即复制 HTML 名称空间-lessimg到 XHTML 结果文档）。因此，请向我们展示您尝试过哪些浏览器的更多详细信息，output您的 XSLT 具有的方法，您尝试创建的 HTML 版本作为转换结果（即 HTML 4.01、XHTML 1.0、HTML5）。

[编辑] 在您当前的示例中，您使用在 XHTML 1.0 命名空间中命名的根元素html作为结果树，Firefox/Mozilla 将您的结果呈现为命名空间很重要的 XML。当您img从输入 XML 复制img元素时，您将没有名称空间的元素复制到 XHTML 文档中，因此由于元素上缺少正确的名称空间，img浏览器不会将该img元素识别为 XHTMLimg元素。因此，您要么需要更改输入 XML 以将 XHTML 命名空间用于要复制的 (X)HTML 片段，要么在我看来，这些天的重点是没有命名空间的 HTML 4 或 HTML5，您只需使用样式表的结果树中的那个版本的 HTML，即你没有为文档的根元素使用命名空间, 你设置<xsl:output method="html" version="4.01"/>或<xsl:output method="html" version="5.0"/>. 这样问题就应该消失了。

作为替代方案，如果您确实希望结果是 XHTML，但您想将img无命名空间中的 XML 元素复制到 XHTML 结果树中，正确的方法是不使用copy-of，而是使用<xsl:apply-templates/>，然后您需要编写将您需要的元素转换为 XHTML 命名空间的模板，例如

<xsl:template match="img | p | center">
  <xsl:element name="{local-name()}" namespace="http://www.w3.org/1999/xhtml">
   <xsl:copy-of select="@*"/>
   <xsl:apply-templates/>
  </xsl:element>
</xsl:template>

在我看来，所有浏览器供应商都专注于不带命名空间的 HTML5，但我建议不要转换为 XHTML，而是以不带命名空间的 HTML 4.01 或 HTML5 为目标，您可以在浏览器中与 XSLT 1.0 获得更好的跨浏览器互操作性。

于 2012-08-14T12:13:31.167 回答
1

当我使用 IE9 显示 XML 文件时，我得到了完整的想要的结果：

在此处输入图像描述

更新：

如 Martin Honnen 所示，缺少的xsl:output语句会导致xml使用输出方法（默认），这就是导致浏览器不将输出视为 HTML 的原因。

添加<xsl:output method="html"/>解决问题。

于 2012-08-14T13:17:45.123 回答