How to view xsl output in browsers?

2019-02-26 02:47发布

站内问答 / 移动开发
1777 2 4

everyone!

I'm building a website based on some xml data files, so I chose to work with XSLT to bind the stylesheets in browsers.

It works quite good at first, but lately, as the templates grow more complicated, something strange happened.

I use the "copy-of" element to copy the data into the stylesheets. Here's the code:

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

So, basically, I'm copying all child elements of the "bodydata" node into <div />.

But it doesn't work. For example, I've got an <img /> element in the bodydata, and that image does not appear if I visit the xml file in the browser. On the other hand, if I copy the "bodydata" elements by hand into that div, and make the .xsl file into a .html file, that image does show up.

So, here's my question, can I view the combined output of the xml data and the xsl data in browsers? Do I need any extension or what?

And any suggestions on what might be wrong? I'm quite new to xslt, so it seems that I misunderstood what XSLT really does. Thanks!

UPDATE

To illustrate the problem, I wrote a little sample.

First, I created a sample xml data file:

<?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>

So, you can see, all nodes in "bodydata" element are html elements that needs to be show on webpage. In order to display that, I created a sample xsl file.

<?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>

And the result is like this: the xslt result The img element just disappears.

And next, I copied the bodydata elements into the section part, and formed a new html file.

<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>

And the result here is: the result of the html file And the image appears.

So I'm wondering what's wrong here.

标签： xml xslt
举报
2条回答
不美不萌又怎样
2楼-- · 2019-02-26 03:41

Consider to show us minimal but complete samples to demonstrate the problem, otherwise it is hard to tell. xsl:copy-of sounds like the right approach to me, assuming the bodydata element has HTML elements as the child elements. As for looking at the transformation result, these days most browsers come with a developer tool (or you can install one like Firebug), then you can hit F12 to see the DOM tree of the document in the browser to inspect the result. As for an element copied to the result tree not showing up, in general it could be a namespace problem (i.e. copying HTML namespace-less img to XHTML result document). So show us more details as to which browser(s) you have tried, which output method your XSLT has, which version of HTML you are trying to create as the transformation result (i.e. HTML 4.01, XHTML 1.0, HTML5).

[edit] With your current samples where you use a root element named html in the XHTML 1.0 namespace for the result tree, Firefox/Mozilla render your result as XML where namespaces matter. When you copy the img element from the input XML you copy an img element in no namespace into an XHTML document, so due to the lack of the right namespace on the img element the browser does not recognize the img element as an XHTML img element. So you either need to change your input XML to use the XHTML namespace for the fragments of (X)HTML you want to copy, or, in my view these days with the focus being on HTML 4 or HTML5 with no namespaces, you simply use that version of HTML in the result tree of the stylesheet i.e. you don't use a namespace for the document's root element, you set <xsl:output method="html" version="4.01"/> or <xsl:output method="html" version="5.0"/>. That way the problem should go away.

As an alternative, if you really want the result to be XHTML but you want to copy an XML img element in no namespace into the XHTML result tree, the proper way would be not to use copy-of, instead you would use <xsl:apply-templates/> and then you would need to write templates that transform the elements you need into the XHTML namespace e.g.

<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>

In my view with all browser vendors focusing on HTML5 without namespaces I would however suggest not to transform to XHTML and instead target HTML 4.01 or HTML5 without namespaces, you get better cross-browser interoperability with XSLT 1.0 in the browser.

查看更多
0人赞 添加讨论(0) 举报
傲
3楼-- · 2019-02-26 03:42

I get the full wanted result when I display the XML file with IE9:

enter image description here

Update:

As shown by Martin Honnen, the missing xsl:output statement causes output method xml (default) to be used and this is what causes the browsers not to treat the output as HTML.

Adding <xsl:output method="html"/> solves the problem.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)