如何查看瀏覽器中的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輸出？

回答

相關問題