16

我有一些 XML 想使用一些 XSL 文件转换成 HTML。这些 XSL 文件都通过 xsl:import 和 xsl:include 语句关联，并且都是完成转换所必需的。

我知道 XSL 可以工作，因为<?xml-stylesheet type="text/xsl" href="transform.xsl"?>在浏览器打开的预先创建的 XML 文件中使用该指令会显示我想要的输出。问题是我希望能够在动态生成的 XML 上复制此功能。

我可以看到有两种方法可以做到这一点，但两者似乎都有我无法解决的限制。

第一个解决方案是使用 Javascript 来转换 XML。据我所知，这将需要 XSLTProcessor 对象来加载多个 XSL 文件，但 Chrome（可能还有其他浏览器）不太支持 xsl:import - http://code.google.com/p/chromium/问题/详细信息？id=8441

我还研究了将 XML 写入 iFrame 或新窗口，但<?xml-stylesheet type="text/xsl" href="transform.xsl"?>指令在结果窗口中被注释掉。实际上，写入新窗口的任何内容都是 HTML——我还没有找到将 XML 写入新窗口的方法。

那么如何让浏览器窗口显示用一组 XSL 文件转换的 XML 文件的结果呢？

更新

所以这是我对这个问题的研究结果。

可能的解决方法：使用 emscripten 将 xsltproc 之类的工具编译成 JavaScript。我实际上已经这样做了 - 请参阅https://github.com/mcasperson/xsltproc.js

问题：Firefox 速度慢得令人难以置信（Chrome 中需要 5 秒的时间在 Firefox 中需要 30+），而且您无法在 Chrome Web Worker 中运行代码 - https://code.google.com/p/chromium/问题/详细信息？id=252492

可能的解决方法：根本不使用 XSL，而是使用 CSS 样式表显示 XML。

问题：在浏览器开始实现该css attr(atrributename, url)功能之前，无法将 XML 属性中的文件引用视为字符串以外的任何内容，这使得无法显示图像。

可能的解决方法：将所有 XSL 文件合并到一个样式表中

问题：这在某种程度上是可能的（请参阅合并多个 xslt 样式表），但是 xsl:import 和 xsl:include 具有特定的语义，当简单地将文件内容替换为 xsl:import 或 xsl:include 语句时，这些语义不会传递。对于分解为多个文件的大型 XSL 转换，此解决方案将需要大量手动工作。

可能的解决方法：将 XML 的内容写入 iframe 或新窗口。

问题：无法将 XML 写入新窗口或 iframe。写入这些元素的内容始终假定为 HTML，并插入到 HTML->BODY 元素中。

可能的解决方法：创建一个接受 XML 的服务器端服务，然后使用 XSL 样式表指令返回该 XML。然后可以将服务 URL 用作srciframe 或新窗口的属性。

问题：服务必须是 GET 端点，这意味着要返回的 XML 必须作为查询参数包含在内，这意味着您最终会遇到 URL 长度的问题。

可能的解决方法：使用像Saxonica CE这样的 javascript XSL 库。

问题：这实际上可能有效（我没有尝试过），但 Saxonica CE 不是开源的（这是我们项目的要求）。

4

3 回答 3

2

如果您想要仅浏览器的解决方案，我会这样做：

静态xml

制作一个仅包含对 xsl 的调用的简单静态 xml。这是在浏览器中打开的 xml - 总是。此 xml 文件可以包含用于控制流程的属性设置，或者根本不包含此示例。

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="cartoon2html.xsl"?>
<xml/>

动态纯xml

使用定义的名称以您喜欢的方式生成动态 XML - 在我的例子中是 cartoons.xml。

<?xml version="1.0" encoding="utf-8"?>
<cartoons>
    <cartoon name="Donald Duck" publisher="Walt Disney" />
    <cartoon name="Mickey Mouse" publisher="Walt Disney" />
    <cartoon name="Batman" publisher="DC Comics" />
    <cartoon name="Superman" publisher="DC Comics" />
    <cartoon name="Iron Man" publisher="Marvel Comics" />
    <cartoon name="Spider-Man" publisher="Marvel Comics" />
</cartoons>

带文档加载的 XSLT

使用 xslt 中的 document loan 来引用生成的动态 xml。通过在第一个应用模板中使用 select，所有其他模板都将按预期工作。

仔细查看顶部的变量引用和代码中的更下方。这是执行魔术的地方。

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

    <xsl:variable name="cartoons" select="document('cartoons.xml')/cartoons" />

    <xsl:template match="/">
        <html>
            <head>
                <title>Cartoons</title>
                <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
            </head>
            <body>
                <xsl:apply-templates select="$cartoons" />
            </body>
        </html>
    </xsl:template>

    <xsl:template match="cartoons">
        <table>
            <xsl:apply-templates />
        </table>
    </xsl:template>

    <xsl:template match="cartoon">
        <tr>
            <td><xsl:value-of select="@name" /></td>
            <td><xsl:value-of select="@publisher" /></td>
        </tr>
    </xsl:template>

</xsl:stylesheet>

您可以将这三个文件保存到选择的目录中，然后在 firefox 中打开静态 xml 文件。（Chrome 或许 Safari 必须通过网络服务器提供文件才能执行转换）。

于 2013-01-10T10:41:37.000 回答
1

我建议使用 jquery 来导入和设置 XML 样式。

这样的事情将允许您在调用函数时导入 XML（链接到按键或刷新按钮甚至计时器的函数。）

$.ajax({
    type: "GET",
    url: "FILENAME.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find('site').each(function(){ //finds parent node
            var id = $(this).attr('id'); //id of parent node
            var title= $(this).find('title').text();  //finds title node within parent node
            var url = $(this).find('url').text(); //finds URL node within parent node
            var description = $(this).find('descr').text(); //etc...
            var img = $(this).find('img').text(); //etc...

            // Creates div with id of parent node (for individual styling)
            $('<div id="link_'+id+'">')
                .addClass('add a div class')
            //sets css of div
                .css({set css})
            // Sets the inner HTML of this XML allocated div to hyperlinked 'title' with 'description' and an 'img'
                .html('<a href="'+url+'">'+title+'</a>'+description+'<img src="'+img+'">')                  
            // Append the newly created element to body
                .appendTo('#holder');
    }
    }
})

XML 看起来像这样：

<site id="0">
 <url>http://blah.com</url>
 <img>imgs/image1.png</img>
 <description>this is a description</description>
 <title>Title</title>
</site>

<site id="1">
 <url>http://filler.com</url>
 <img>imgs/image2.jpg</img>
 <description>this is another description</description>
 <title>Title 2</title>
</site>

当然，您可以将 XML 导入表格或任何其他类型的 HTML 元素，而不是导入 div。

于 2012-12-30T00:06:00.717 回答
0

我刚才也有同样的问题。我的解决方案是将包含直接传播到 XML 中。此代码在 Chrome、Firefox 和 IE 10、9、8 和 7 下进行了测试。

function propegateIncludes(dname,xml, isExplorer) {
    var preTag = isExplorer ? "xsl:" : "";

    var TAG_STYLESHEET = preTag + "stylesheet", TAG_INCLUDE = preTag
        + "include", TAG_TEMPLATE = preTag + "template";

    var stylesheets = xml.getElementsByTagName(TAG_STYLESHEET);
    if (stylesheets.length == 0) {
        return;
    }

    var includes = xml.getElementsByTagName(TAG_INCLUDE);
    if (includes.length == 0) {
        return;
    }

    var stylesheet = stylesheets[0];
    var path = dname.substring(0, dname.lastIndexOf('/'));

    for ( var i = 0; i < includes.length; i++) {
        var args = includes[i].attributes;
        var includeXml = null;

        for ( var a = 0; a < args.length; a++) {
            if (args[a].nodeName == "href") {
                includeXml = loadXMLDoc(path + "/" + args[a].nodeValue);
                break;
            }
        }

        stylesheet.removeChild(includes[i]);

        if (includeXml != null) {
            var templates = includeXml.getElementsByTagName(TAG_TEMPLATE);

            for (var t = 0; t < templates.length; ++t) {
                stylesheet.appendChild(templates[t].cloneNode(true));
            }
        }
    }
}
于 2013-07-11T01:10:02.167 回答