Question

下面的代码片段是我遇到的问题的最小代表。目的是通过XSL转换XML并将结果转换为变量。

注释行发生错误。我做错了什么？

更大的局面是，我希望能够在浏览器中拥有XML文件的URL和XSL文件的URL，并使用XSL转换XML。我从服务器管道工作中加载了所有文件，但是我收到了这个错误，并且无法在Google中找到可理解的答案。自2014年左右以来，客户端的XML转换似乎没有什么重点，所以我想知道是否有更现代的技术或插件。

我很乐意接受一个简单的JS或jquery答案，或插件。

我知道这个最小的例子不是跨浏览器（没有IE风格的解决方案）但我应该说我确实需要跨浏览器解决方案作为最终答案。

最后，我知道您可以在服务器上进行转换，但不在规范中。

以下是控制台和catch的错误。

err = TypeError：无法执行＆＃39; importStylesheet＆＃39;上   ＆＃39; XSLTProcessor＆＃39;：参数1的类型不是＆＃39; Node＆＃39;。

错误：{＆＃34;消息＆＃34;：   ＆＃34;未捕获的TypeError：无法执行＆＃39; transformToFragment＆＃39;上   ＆＃39; XSLTProcessor＆＃39;：参数1的类型不是＆＃39; Node＆＃39;。＆＃34;，＆＃34; filename＆＃34;：   ＆＃34; https://stacksnippets.net/js＆＃34;，＆＃34; lineno＆＃34;：26，＆＃34; colno＆＃34;：32}

以下是导致错误的代码。

＆＃13;

var xsltProcessor, resultDocument, xml, xsl;

var xml = '<?xml version="1.0" encoding="UTF-8"?><catalog><cd><title>Empire Burlesque</title></cd></catalog>';
var xsl = '<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/">  <h2>My CD Collection</h2>  <table border="1">    <tr bgcolor="#9acd32">      <th style="text-align:left">Title</th>      <th style="text-align:left">Artist</th>    </tr>    <xsl:for-each select="catalog/cd">    <tr>      <td><xsl:value-of select="title" /></td>    </tr>    </xsl:for-each>  </table></xsl:template></xsl:stylesheet>'


xsltProcessor = new XSLTProcessor();
try {
  xsltProcessor.importStylesheet(xsl);  // < error here !
} catch (error) {
  console.log('err=' + error);
}
resultDocument = xsltProcessor.transformToFragment(xml, document);

console.log(resultDocument);

＆＃13;

Answer 1

我找到了自己的答案，所以发布以防将来帮助其他人。解决方案的关键是使用DomParser将XML和XSL从其字符串形式解析为文档。

灵感来自于这个问题Workaround for xml data islands ，导致了这个MDN article about Using XML Data Islands in Mozilla，他们正在解释一个解决方法，他们做了类似于加载HTML5'数据块'的事情。

注意：如果您查看开发控制台，您可能会看到很多与DOM异常和跨域关系相关的错误。看起来这段代码与SO片段机器不一致，但是如果你切断＆amp;粘贴到你自己的html作为脚本块它运行得很好，在控制台中产生一个令人愉快的'＃document-fragment'。

var xsltProcessor, resultDocument, xml, xsl;

var xml = '<?xml version="1.0" encoding="UTF-8"?><catalog><cd><title>Empire Burlesque</title></cd></catalog>';
var xsl = '<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/">    <xsl:for-each select="catalog/cd">      <xsl:value-of select="title" />    </xsl:for-each></xsl:template></xsl:stylesheet>';

// Secret sauce start. 
var parser = new DOMParser();
var xsl_doc = parser.parseFromString(xsl, "application/xml");
var xml_doc = parser.parseFromString(xml, "application/xml");
// end of secret sauce.

xsltProcessor = new XSLTProcessor();
try {
  xsltProcessor.importStylesheet(xsl_doc);
} catch (error) {
  console.log('err=' + error);
}
resultDocument = xsltProcessor.transformToFragment(xml_doc, document);

console.log(resultDocument);

Answer 2

回答你问题的这一部分：

客户端的XML转换似乎很少关注从2014年左右开始，我想知道是否有更现代的技术或插件。

我想说自2004年左右以来，浏览器供应商几乎没有关注它。

但是如果你想要更现代的东西，那就是Saxon-JS，它是XSLT 3.0的纯Javascript实现。它不仅支持3.0标准，而且还具有交互式扩展，因此您可以直接在XSLT代码中处理用户输入事件。详细信息位于http://www.saxonica.com/saxon-js/index.xml

免责声明：Saxon-JS由我公司Saxonica制作。

从变量加载XML和XSL并在浏览器中进行转换

2 个答案: