【问题标题】：How to style an XML fragment with Greasemonkey?如何使用 Greasemonkey 设置 XML 片段的样式？
【发布时间】：2015-03-03 08:52:18
【问题描述】：

我正在尝试使用 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 报告：

此 XML 文件似乎没有关联任何样式信息用它。文档树如下所示。

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

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

【问题讨论】：

向我们展示 AJAX 调用
不会not声明类型无效吗？我不是 XML 专家，但我只是认为这是你应该做的事情。
@PeteTNT：我试图避免使用 XHR，否则我可以解析它。 Xero：这是服务器输出，不是正确的页面。

标签： javascript css xml xslt greasemonkey

【解决方案1】：

您使用Extensible Stylesheet Language Transformations (XSLT)“样式化”XML。 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 正文。例如：Don't forget me this weekend! 来自您的示例。

使用XSLTProcessor() 在 Greasemonkey 脚本中运行 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更好。

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

你会看到它改变了那个文档...

发件人：

收件人：

【讨论】：

您实际上并不需要使用 XSLT 来设置 XML 样式，您也可以通过使用 xml 样式表处理节点来应用 CSS 样式表，请参阅w3.org/Style/styling-XML.en.html
这似乎在 Chrome 中不起作用（不是因为缺少 ` 支持，而是因为 newContent 中的 body 没有填充），而代码在 Firefox 中有效，使用 ViolentMonkey 时无法加载此文件
作为后续，在 webkit 浏览器中，这似乎与 XML 漂亮的打印机有关（参见 stackoverflow.com/questions/16729263/…），因此应该使用类似 new DOMParser().parseFromString(document.getElementById('webkit-xml-viewer-source-xml').innerHTML, 'text/xml'); 的结果而不是 document 跨度>
@Treviño，4.5 年来发生了很多变化，[greasemonkey] 标签意味着 Firefox-only（与 [tampermonkey] 或 [userscripts] 标签相对）。如果需要，请打开一个新问题。
仅供参考，Tampermonkey 工作正常（至少在 Firefox 中）。