Question

大家好！

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

一开始效果很好，但最近，随着模板变得越来越复杂，发生了一些奇怪的事情。

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

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

所以，基本上，我正在将“bodydata”节点的所有子元素复制到＆lt; div /＆gt ;.

但它不起作用。例如，我有一个＆lt; img /＆gt; bodydata中的元素，如果我在浏览器中访问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>

结果是这样的： the xslt result 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>

结果如下： the result of the html file 图像出现了。

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

Answer 1

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

[编辑] 使用当前样本，在结果树的XHTML 1.0命名空间中使用名为html的根元素，Firefox / Mozilla将结果呈现为名称空间无关紧要的XML。从输入XML复制img元素时，将无名称空间中的img元素复制到XHTML文档中，因此img元素上缺少正确的命名空间不会将img元素识别为XHTML img元素。因此，您需要更改输入XML以将XHTML命名空间用于要复制的（X）HTML片段，或者，在我的视图中，这些日子的重点是HTML 4或HTML5，没有命名空间，您只需使用样式表的结果树中的HTML版本即不使用文档根元素的命名空间，您设置<xsl:output method="html" version="4.01"/>或<xsl:output method="html" version="5.0"/>。那样问题就会消失。

作为替代方案，如果您真的希望结果是XHTML，但是您希望将无名称空间中的XML img元素复制到XHTML结果树中，那么正确的方法是不使用{{1} }，而你将使用copy-of，然后你需要编写模板，将你需要的元素转换为XHTML命名空间，例如

<xsl:apply-templates/>

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

Answer 2

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

enter image description here

<强>更新：

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

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

如何在浏览器中查看xsl输出？

2 个答案: