使用多个XSL文件转换XML

Question

我有一些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文件的结果？

UPDATE

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

可能的解决方法:使用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 stylesheet指令返回该XML.然后,服务URL可以用作srciframe或新窗口的属性.

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

可能的解决方法:使用像Saxonica CE这样的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。