How to view xsl output in browsers?

Question

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

Answer 1

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

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.

Answer 2

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.