如何使用 Greasemonkey 设置 XML 片段的样式？

Question

我正在尝试使用 Greasemonkey 脚本对来自服务器响应的 XML 片段进行样式化。

Example XML fragment from w3schools.com:

<note>
  <to> Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

（它没有像<?xml version="1.0" encoding="UTF-8"?>一样在顶部声明）

Firefox 报告：

This XML file does not appear to have any style information associated with it. The document tree is shown below.

如何设置显示样式？
我可以将其转换为正确的 HTML 吗？怎么样？

N.B. 我可以使用 XHR 抓取和解析数据，但我试图避免使用 XHR 并使用浏览器来显示数据（因为它是一个获取方法）。我只需要将其格式化为更易读的格式。

Answer 1

您 "style" XML 使用 Extensible Stylesheet Language Transformations (XSLT)。 XSLT 使用样式表将 XML 解析为 HTML。然后，您可以使用标准 CSS 来格式化结果 HTML.

的显示

对于 the sample XML you cited，此样式表：

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html"/>
    <xsl:template match="/">
        <html>
            <body>
                <xsl:for-each select="note">
                    <p> <xsl:value-of select="body"/> </p>
                </xsl:for-each>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

会给你一个格式正确的 HTML 文档，其中只列出了 note 正文。 EG：Don't forget me this weekend! 来自你的例子。

在 Greasemonkey 脚本中使用 XSLTProcessor() 到运行 XSLT，如下所示：

// ==UserScript==
// @name        _XML renderer / styler
// @description stylesheet for xml results
// @include     http://YOUR_SERVER.COM/YOUR_PATH/*.xml
// @include     http://www.w3schools.com/xml/note.xml
// @grant       none
// ==/UserScript==

//-- Warning, multiline str is new in JS. Only Firefox supports at the moment.
var xsl_str = `<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html"/>
    <xsl:template match="/">
        <html>
            <head>
                <title>My super new note format!</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <style type="text/css">
                    body { padding: 0 2em; }
                    .noteCtr {
                        border: 1px solid gray;
                        border-radius: 1ex;
                        padding: 0;
                        background: #FAFAFA;
                    }
                    .messPeople { font-size: 1em; margin: 1ex 1em; }
                    .messHeading { background: lightcyan; margin: 0 1.6ex; }
                    .messHeading::after { content: ":"; }
                    .noteCtr > p {
                        background: white;
                        padding: 1em;
                        margin: 0 1em 1.5ex 1em;
                    }
                </style>
            </head>
            <body>
                <xsl:for-each select="note">
                    <div class="noteCtr">
                        <h3 class="messPeople">
                            <xsl:value-of select="from"/>
                            --&gt;
                            <xsl:value-of select="to"/>
                        </h3>
                        <h3 class="messHeading"> <xsl:value-of select="heading"/> </h3>
                        <p> <xsl:value-of select="body"/> </p>
                    </div>
                </xsl:for-each>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>
`;

var processor   = new XSLTProcessor ();
var dataXSL     = new DOMParser ().parseFromString (xsl_str, "text/xml");

processor.importStylesheet (dataXSL);

var newDoc      = processor.transformToDocument (document);

//-- These next lines swap the new, processed doc in for the old one...
window.content  = newDoc;

document.replaceChild (
    document.importNode (newDoc.documentElement, true),
    document.documentElement
);

这里我将样式表存储在 xsl_str 变量中。对于更复杂的操作，您可能会发现 fetch the stylesheet via a @resource directive.

如何使用 Greasemonkey 设置 XML 片段的样式？

How to style an XML fragment with Greasemonkey?

javascript

css

xml

xslt

greasemonkey

安装该脚本，然后访问 your example XML。

发件人：

收件人：