XSLT 输出不反映在 Firefox 上答案

【问题标题】：XSLT output does not reflect on FirefoxXSLT 输出不反映在 Firefox 上
【发布时间】：2009-11-07 20:41:53
【问题描述】：

我创建了一个 Practice.xsl 文件来将源 Practice.xml 从 javascript 转换为 html，并将生成的 html 添加到 n 空 DIV 元素，这在 IE 中运行良好但是相同的 html 在 Firefox 上无法正确呈现。

这里是 Practice.xml

<feed>
 <feedback>
  <user>Naresh</user>
  <date>12 Oct, 2009</date>
  <comments>This blog has no stuff to rate it</comments>
 </feedback>
 <feedback>
  <user>Pokuri</user>
  <date>21 Dec, 2009</date>
  <comments>Naresh is right</comments>
 </feedback>
 <feedback>
  <user>Subbu</user>
  <date>30 Dec, 2009</date>
  <comments>I don't agree with both Naresh n Pokuri</comments>
 </feedback>
</feed>

这里是 Practice.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:output method="html" indent="yes"/>
<xsl:template match="feed/feedback">
<html>
 <head>
  <title>Feedback Forum</title>
 </head>
 <body>
 <span style="display:block; padding: 5px 10px; background-color: #C9F0F9; width: 100%; margin-top:10px; border-left:10px solid #F9EBC9; border-bottom: 1px solid #000000;"><xsl:apply-templates select="user"/> on <xsl:apply-templates select="date"/></span>
 <span style="display:block; padding: 5px 10px; background-color: #CDF5CD; width: 100%; border-left:10px solid #F9EBC9;"><xsl:apply-templates select="comments"/></span>
 </body>
</html>
</xsl:template>
</xsl:stylesheet>

这是用于在 Firefox 上进行 XSLT 转换的 javascript

function listOrders(){ 
 var XSLT = loadXSLT("Practice.xsl");
 var trasformedText;
 if(window.ActiveXObject){
  trasformedText = XMLDOM.transformNode(XSLT);
  document.getElementById("rightDIV").innerHTML=trasformedText;
 } else if(document.implementation && document.implementation.createDocument){
  **xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(XSLT);
  trasformedText = xsltProcessor.transformToFragment(XMLDOM, document);
  document.getElementById("rightDIV").appendChild(trasformedText);**
 } else {
  alert("Sorry your browser may not support xsl transformation.\n+Please check your browser documentation for further help");
 }

}

【问题讨论】：

标签： firefox xslt transformation

【解决方案1】：

查看生成的 HTML 源代码。看起来对吗？您正在为每个 feedback 显示一个完整的 <html> 页面，而不是为每个 feedback 仅显示 <span>s。

您的 XSL 需要针对每个反馈使用 <xsl:for-each> 进行更改：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:output method="html" indent="yes"/>
<xsl:template match="feed">
<html>
 <head>
  <title>Feedback Forum</title>
 </head>
 <body>
 <xsl:for-each select="feedback">
  <span style="display:block; padding: 5px 10px; background-color: #C9F0F9; width: 100%; margin-top:10px; border-left:10px solid #F9EBC9; border-bottom: 1px solid #000000;"><xsl:apply-templates select="user"/> on <xsl:apply-templates select="date"/></span>
  <span style="display:block; padding: 5px 10px; background-color: #CDF5CD; width: 100%; border-left:10px solid #F9EBC9;"><xsl:apply-templates select="comments"/></span>
 </xsl:for-each>
 </body>
</html>
</xsl:template>
</xsl:stylesheet>

IE 在一个响应中显示多个<html>s 太宽容了，这就是它在这个浏览器中工作的原因。 Firefox 更严格地遵守标准：DOM 中只能有一个 <html> 元素。

【讨论】：

是的，我现在只生成 span 标签。但这不起作用。如果我在 Firefox 中使用 Firebug 调试脚本，那么它会正确反映转换。怎么会这样？

【解决方案2】：

我知道这并不能真正回答这个问题，但是客户端 xslt 转换非常冒险，并且不能保证您的一致性。如果我是你，我会考虑使用服务器端 XSLT 转换。

【讨论】：

有趣的观点是，XSLT 1.0 非常简单，几乎没有歧义的余地。你意见的来源是什么？你能指出任何不一致的例子吗？

【解决方案3】：

可能是 Firefox 加载 xsl 文件的速度慢。所以我做了以下代码更改来应对它，由于文件很小，我忽略了它。

写了声明 XMLDOM.async=false； XSLT.async=false;

function loadXML(){
    var XMLDOM;
    // if it is IE
    if(window.ActiveXObject){
        XMLDOM = new ActiveXObject("Microsoft.XMLDOM");
            // following staement added
        XMLDOM.async=false;
        XMLDOM.load("Practice.xml");
    } else if(document.implementation && document.implementation.createDocument){       
        XMLDOM = document.implementation.createDocument("", "", null);
            // following staement added
        XMLDOM.async=false;
        XMLDOM.load("Practice.xml");
    } else {
        alert("Sorry your browser may not support loading an external file.\n+Please check your browser documentation for further help");
    }
    return XMLDOM;
}

function loadXSLT(xsltFile){
    var XSLT;
    // if it is IE
    if(window.ActiveXObject){
        XSLT = new ActiveXObject("Microsoft.XMLDOM");
                // following staement added
        XSLT.async=false;
        XSLT.load(xsltFile);
    } else if(document.implementation && document.implementation.createDocument){       
        XSLT = document.implementation.createDocument("", "", null);
                // following staement added
        XSLT.async=false;
        XSLT.load(xsltFile);
    } else {
        alert("Sorry your browser may not support loading an external file.\n+Please check your browser documentation for further help");
    }
    return XSLT;
}

【讨论】：