javascript - 使用 CSS 样式动态加载 XML

Question

我想将 XML 文件及其 CSS 样式表加载到 textarea 或 div 中。每个 XML 文件都有正确显示它的 CSS 样式表:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="first.css"?>
<?xml-stylesheet href="second.css"?>
<book>
  <sentence>
  !!! SNIP !!!

如果我通过在地址栏中键入文件的 URL 将文件直接加载到 Web 浏览器中，它会正确显示，包括所有样式。现在我想以同样的方式显示它，动态加载它。

我已经尝试了几种变体，例如

<textarea id="display">
</textarea>

$.ajax({
    type: "GET",
    url: "https://raw.githubusercontent.com/someplace/my.xml",
    dataType: "text",
    success: function(xml) {
        alert("GET succeeded")
        var xmlDoc = $.parseXML(xml);
        document.getElementById("display").append(xmlDoc.childNodes);    
    }
}); 

我不知道如何将样式动态应用到已解析的 XML 文档并显示它。我不想将其转换为 HTML，我只想显示已在 Web 浏览器中正确显示的相同文档。

有人知道怎么做吗？

Answer 1

XML 和 CSS 的要点在于它可以在浏览器中很好地呈现。但为什么在 textarea 中？您可以使用 iframe 标记来显示它，如果显示它的标记不太重要的话。通过更改 iframe 的 src 属性，您可以动态加载它。