爲什麼HTML數據被剝離，只剩下純文本？

我想通過XSL轉換將轉換後的XML數據放入HTML頁面。下面是我的XML：爲什麼HTML數據被剝離，只剩下純文本？

<?xml version="1.0" encoding="ISO-8859-1"?> 
<?xml-stylesheet type="text/xsl" href="w3.xsl"?> 
<catalog> 
    <cd> 
     <title>Empire Burlesque</title> 
     <artist>Bob Dylan</artist> 
     <country>USA</country> 
     <company>Columbia</company> 
     <price>10.90</price> 
     <year>1985</year> 
    </cd> 
    <cd> 
     <title>Hide your heart</title> 
     <artist>Bonnie Tyler</artist> 
     <country>UK</country> 
     <company>CBS Records</company> 
     <price>9.90</price> 
     <year>1988</year> 
    </cd> 
    <cd> 
     <title>Greatest Hits</title> 
     <artist>Dolly Parton</artist> 
     <country>USA</country> 
     <company>RCA</company> 
     <price>9.90</price> 
     <year>1982</year> 
    </cd> 
</catalog>

XSL文件的內容：

<?xml version="1.0" encoding="ISO-8859-1"?> 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 

<xsl:output method="html" /> 
<xsl:template match="/"> 
    <html> 
    <body> 
    <h2>My CD Collection</h2> 
    <table border="1"> 
     <tr bgcolor="#9acd32"> 
     <th>Title</th> 
     <th>Artist</th> 
     </tr> 
     <xsl:for-each select="catalog/cd"> 
     <tr> 
     <td><xsl:value-of select="title"/></td> 
     <td><xsl:value-of select="artist"/></td> 
     </tr> 
     </xsl:for-each> 
    </table> 
    </body> 
    </html> 
</xsl:template> 
</xsl:stylesheet>

但是轉換後的XML沒有HTML屬性;它看起來像這樣：

它應該是這樣的：

這裏是一個充滿DOM的功能，這是問題的原因：

//Load the XML document and XSLT document into XML DOM objects 
var xml = document.implementation.createDocument("", "", null); 
var xslt = document.implementation.createDocument("", "", null); 

//Set the async property on both documents to false so that they both completely load 
//before any further processing is attempted. 
xml.async = false; 
xslt.async = false; 

//Load XML and XSLT documents into the XML DOM objects. 
xml.load("w3.xml"); 
xslt.load("w3.xsl"); 

//Create a new XSLTProcessor object and use its importStylesheet() method to import the XSLT DOM object. 
var processor = new XSLTProcessor(); 
processor.importStylesheet(xslt); 

//Transform the XML to a new XML DOM object with the transformToDocument() method of the XSLTProcessor. 
var XmlDom = processor.transformToDocument(xml) 

//Create a new XMLSerializer and use it to serialize the new XML DOM object to a string. 
var s = new XMLSerializer(); 
var output = s.serializeToString(XmlDom.documentElement); 

//The result can then be output to the innerHTML property of any element on the page. 
var outputDiv = document.getElementById("xmldata"); 
outputDiv.innerHTML = output;

來源

2012-04-23 Demego

下圖顯示執行的結果：這是輸出應該什麼樣子http://imgur.com/mzVOp,ilVgj ＃0和http://imgur.com/mzVOp,ilVgj#1是執行後的外觀。 – Demego 2012-04-23 23:52:58

我不承認顯示HTML的應用程序，您確定它呈現HTML表格屬性嗎？ – 2012-04-24 00:54:25

這是Firefox與螢火蟲附加。你看到圖中的日誌控制檯 – Demego 2012-04-24 01:08:06

我認爲你的'主機'HTML頁面必須有一個DOCTYPE標識HTML爲HTML5。然後，因爲您嘗試添加HTML 5中已過時的屬性（如bgcolor）（請參閱W3C: HTML5 differences from HTML4），它們將被忽略，因此不會添加到DOM中。

嘗試使用樣式屬性代替 - 如鏈接頁面中所推薦的。

的XSLT的TR元素則是這樣的：

<xsl:template match="/"> 
... 
    <tr style="background-color:#9acd32;"> 
    <th>Title</th> 
    <th>Artist</th> 
    </tr> 
... 
    </xsl:template>

來源

2012-04-24 07:11:43 pgfearo

我找到了原因，看起來像css導致了錯誤，仍然在調試它，這是相當模糊的。 – Demego 2012-04-24 09:07:14

@Demego您是否認爲錯誤與您使用HTML5規範中描述的屬性爲「過時」的事實無關？ – pgfearo 2012-04-24 10:56:41

是的，這是以誤導的方式改變表格的CSS屬性，使我認爲這是轉換。過時的屬性工作得很好。 – Demego 2012-04-24 22:29:04

爲什麼HTML數據被剝離，只剩下純文本？

回答

相關問題