当前位置： 文江博客话题详情

XSLT 输出不会反映在 Firefox 上

发布于 2024-08-11 00:13:33 字数 2589 浏览 5 评论 0原文

我创建了一个 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 中： http://img97.imageshack.us/img97/8509/firefoxk.jpg

原文

I have created a Practice.xsl file to transform the source Practice.xml to an html from javascript and add the generated html to n empty DIV element, which is working fine with IE
But same html is not rendered correctly on Firefox.

here is the 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>

Here is the 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>

Here is the javascript for work with XSLT transformations on Firefox

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");
 }

}

Relative images for professionals to identify the problem easily

In Firefox:
http://img97.imageshack.us/img97/8509/firefoxk.jpg

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

如果没有 2024-08-18 00:13:33

查看生成的 HTML 源。看起来合适吗？您正在为每个反馈显示完整的页面，而不是仅显示 > 每个反馈。

对于每个反馈，您的 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">
<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 在一个响应中显示多个 过于宽容，这就是它在这个浏览器中工作的原因。 Firefox 更严格地遵守标准：DOM 中只能有一个 元素。

View the generated HTML source. Does it look right? You're displaying a complete <html> page for each feedback instead of displaying only the <span>s for each feedback.

Your XSL needs to be altered with a <xsl:for-each> for each feedback:

<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 is too forgiving in displaying multiple <html>s in one response, that's why it worked in this browser. Firefox more strictly adheres the standards: there can be only one <html> element in the DOM.

回复 原文
秋叶绚丽 2024-08-18 00:13:33

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

I know this doesn't really answer the question, but client-side xslt transform is pretty dicey and you're not guaranteed much consistency. I would consider using server side XSLT transformation if I were you.

回复 原文
丶视觉 2024-08-18 00:13:33

可能是 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;
}

Might be the slowness of Firefox in loading xsl file. So I made following code changes to cope with it, which i have ignored as the files are small.

wrote the statement
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;
}
回复 原文
~没有更多了~

关于作者

北渚

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文