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

Question

I have a xml file which I receive as a string from the server. I have my own custom XSLT stylesheet which I want to add it to the XML file dynamically. I have a table which has list of xml files so when I click on one of the files, I want to parse the XML string and embed the stylesheet. The issue is when I parse the xml string I get something like this:

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

with book being the root node. What I was expecting was:

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

with xml being the root element which then I can access and insert the stylesheet after that. But since it's not the root element and I am not able to add the XSLT stylesheet. Here's what I have tried

 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

Any help is appreciated. Also, if there is an alternative way to handle this problem i'd like that too.

Answer 1

As for the DOM manipulation, I think you want

xmlDoc.insertBefore(result, xmlDoc.documentElement);

I don't think it will help applying the XSLT, however.

As for the code not working, the following should do:

 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);

To process XSLT and write the result to an iframe it might work to use eg

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();