自：

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报道：

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

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

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

Answer 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>

会为您提供刚刚列出note正文的正确格式的HTML文档。 EG：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。

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

自：

Before XSLT

到：

After XSLT

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

1 个答案:

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

自：

到：