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

我正在构建基于一些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的真正用处。谢谢！

UPDATE

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

首先，我创建了一个示例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 并显示图像。

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

来源

2012-08-14 Void Main

你是什么意思，“那个图像没有出现......”你没看到“”“？或者你想看到图片本身显示？ – 2012-08-14 12:14:46

@DimitreNovatchev我看到了img元素在dom树中，但宽度和高度都为0. – 2012-08-14 12:15:31

这意味着源XML文档中的宽度和高度都为0（'xsl：copy-of'复制节点时没有任何更改）因此，要更改这些属性的值应该使用与'xsl：copy-of'不同的东西 – 2012-08-14 12:23:25

请考虑向我们展示最小但完整的样品来证明问题，否则很难说。 xsl:copy-of听起来像是对我的正确方法，假设bodydata元素具有HTML元素作为子元素。至于查看转换结果，目前大多数浏览器都带有一个开发工具（或者您可以安装一个类似于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结果树复制，正确的方法是不使用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-14 12:13:31

谢谢马丁，我已经更新了这个问题。 – 2012-08-14 12:22:07

我试过Safari，Chrome，Firefox。所有的行为都一样。 – 2012-08-14 12:27:48

我上传了Safari的屏幕截图。 – 2012-08-14 12:33:55

我得到充分的通缉的结果，当我显示与IE9 XML文件：

enter image description here

更新：

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

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

来源

2012-08-14 13:17:45

你在Chrome或Firefox上试过了吗？ – 2012-08-14 13:19:12

我刚试过 - FF只显示文字。 Chrome浏览器显示一个空白页面 - 这两个浏览器在无法执行XSLT转换时都有类似的错误。 – 2012-08-14 14:07:33

我不认为这是一个错误，我认为问题是转换结果和命名空间处理的类型的差异。对于当前发布的样本，结果树的根元素是一个XHTML'html'元素，所以输出方法是'xml'，其中命名空间很重要。而从XML输入复制到结果树的'img'元素不在命名空间中，就像Firefox在将XHTML渲染为XML时无法识别没有名称空间中的'img'元素一样。所以要以跨浏览器的方式解决问题，我建议使用HTML 4.01或HTML5作为结果文档。 – 2012-08-14 14:13:17

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

回答

相关问题