在 iframe 中将 XML 文件显示为 HTML（使用 XSLT）

Question

我有一个 xml 文件，我从服务器接收到它作为字符串。 我有自己的自定义 XSLT 样式表，我想将其动态添加到 XML 文件中。 我有一个表，其中包含 xml 文件列表，因此当我单击其中一个文件时，我想解析 XML 字符串并嵌入样式表。 问题是当我解析 xml 字符串时，我得到如下信息：

<book>
 <title>test<title>
</book>

book 是根节点。 我所期待的是：

<?xml version="1.0" encoding="UTF-8"?>
<book>
 <title>test<title>
</book>

xml 是根元素，之后我可以访问并插入样式表。 但由于它不是根元素，我无法添加 XSLT 样式表。 这是我尝试过的

 const parser = new DOMParser();
 const xmlDoc = parser.parseFromString(xmlString, 'application/xml');
 const result =  xmlDoc.createProcessingInstruction('xml-stylesheet', 'href="test.xsl" type="text/xsl"')
 xmlDoc.documentElement.insertAfter(result, xmlDoc.documentElement) // this fails because xml is not the root element

任何帮助表示赞赏。 此外，如果有另一种方法来处理这个问题，我也会喜欢。

Answer 1

至于 DOM 操作，我想你想要

xmlDoc.insertBefore(result, xmlDoc.documentElement);

但是，我认为这对应用 XSLT 没有帮助。

至于代码不起作用，应该执行以下操作：

 const xmlString = `<book> <title>test<\/title> </book>`; const parser = new DOMParser(); const xmlDoc = parser.parseFromString(xmlString, 'application/xml'); const result = xmlDoc.createProcessingInstruction('xml-stylesheet', 'href="test.xsl" type="text/xsl"'); xmlDoc.insertBefore(result, xmlDoc.documentElement); console.log(new XMLSerializer().serializeToString(xmlDoc)); console.log(xmlDoc);

要处理 XSLT 并将结果写入 iframe 它可能使用例如

const xmlString = `<book>
 <title>test<\/title>
</book>`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, 'application/xml');

const xslt = `xslt code goes here`;

const xsltDoc = parser.parseFromString(xsltString, 'application/xml');

const xsltProcessor = new XSLTProcessor();

xsltProcessor.importStylesheet(xsltDoc);

const resultDoc = xsltProcessor.transformToDocument(xmlDoc);

const iframeDoc = window.frames.frameName.document;

iframeDoc.open();
iframeDoc.write(new XMLSerializer().serializeToString(resultDoc));
iframeDoc.close();