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

Posted 2023-02-16

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

【英文标题】：Display an XML file as HTML(using XSLT) in iframe

【发布时间】：2020-11-05 06:01:21

【问题描述】：

我有一个 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

感谢任何帮助。另外，如果有其他方法可以解决这个问题，我也很喜欢。

【参考方案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();

【讨论】：

我试过了，但没有成功，因为 xmlDoc 是根元素，而您正试图在它之前插入。

@pogbamessi，不知道您认为您遇到了哪个错误以及为什么将文档节点与根元素混淆，但我可以向您保证，您可以在 documentElement 子节点之前插入一个处理指令节点，如图所示.

我能够插入 XSL 样式表。但我无法将其呈现为 iframe。我试图这样做： 但它在 iframe 中给了我 [object Element]

@pogbamessi，正如我所指出的，在 iframe 中呈现 XSLT 转换结果的任务无法通过将处理指令插入 DOM 文档来解决。您需要使用 XMLHttpRequest 加载 XSLT，创建 XSLTProcesssor，导入样式表并使用 transformToFragment 方法将结果插入或 importNode 到 iframe 文档中，或者使用 transformToDocument 方法序列化并将结果写入 iframe。

const parser = new DOMParser(); const xmlDoc = parser.parseFromString(xmlString, 'application/xml'); const xsltDoc = parser.parseFromString(xsltString, 'application/xml');常量 xsltProcessor = 新 XSLTProcessor(); xsltProcessor.importStylesheet(xsltDoc); const resultDocument = xsltProcessor.transformToFragment(xmlDoc, document); console.log(resultDocument);当我尝试这样做时，我一直为空。我从服务器获取 xml 和 xslt 样式表作为字符串。