Question

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

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

我可以通过两种方式看到这可能已经完成，但两者似乎都存在一些我无法解决的局限。

第一个解决方案是使用Javascript来转换XML。据我所知，这将需要XSLTProcessor对象加载多个XSL文件，但Chrome（可能还有其他浏览器）不支持xsl：import非常好 - http://code.google.com/p/chromium/issues/detail?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网络工作者中运行代码 - {{3} }

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

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

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

问题：这有点可能（请参阅https://code.google.com/p/chromium/issues/detail?id=252492），但xsl：import和xsl：include具有特定的语义，当简单地替换文件内容时，这些语义不会传递xsl：import或xsl：include语句。对于在多个文件中分解的大型XSL转换，此解决方案需要大量手动工作。

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

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

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

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

可能的解决方法：使用像Merge multiple xslt stylesheets这样的javascript XSL库。

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

Answer 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。

Answer 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中使用文档贷款来引用生成的动态xml。通过在第一个apply-templates中使用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可能必须通过Web服务器提供文件才能执行转换。）

Answer 3

我刚才遇到了同样的问题。我的解决方案是将包含直接传播到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));
            }
        }
    }
}

使用多个XSL文件转换XML

3 个答案:

静态xml

动态普通xml

带文档加载的XSLT