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

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

javascript css xml xslt

Javascript 如何使用Greasemonkey设置XML片段的样式？,javascript,css,xml,xslt,greasemonkey,Javascript,Css,Xml,Xslt,Greasemonkey,我正在尝试使用Greasemonkey脚本从服务器响应中设置XML片段的样式 : 托弗贾尼提醒这个周末别忘了我！（顶部没有声明，如） Firefox报告：此XML文件似乎没有任何关联的样式信息用它。文档树如下所示如何设置显示器的样式？我能把它转换成正确的HTML吗？怎么做 N.B.我可以使用XHR抓取和解析数据，但我试图避免使用XHR并使用浏览器显示数据（因为它是一种GET方法）。我只需要将其格式化为更可读的格式。您可以使用“样式化”XML。XSLT使用样式表将XML解析为H

我正在尝试使用Greasemonkey脚本从服务器响应中设置XML片段的样式


托弗
贾尼
提醒
这个周末别忘了我！

（顶部没有声明，如

）

Firefox报告：

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

如何设置显示器的样式？
我能把它转换成正确的HTML吗？怎么做

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

您可以使用“样式化”XML。XSLT使用样式表将XML解析为HTML。然后，您可以使用标准CSS格式化结果HTML的显示

对于，此样式表：

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

在这里，我将样式表存储在

xsl\u str

变量中。对于更复杂的操作，您可能会发现最好是

安装该脚本，然后访问。您将看到它转换该文档

发件人：

致：

告诉我们AJAX调用不会声明类型无效吗？我不是XML专家，但我只是认为这是你应该做的事情。@PeteTNT:我试图避免使用XHR，否则我可以解析它。Xero：这是一个服务器输出，不是一个合适的页面。实际上，您不需要使用XSLT来设置XML的样式，您也可以通过使用XML样式表处理节点来应用CSS样式表，请看，这在Chrome中似乎不起作用（不是因为缺少

支持，而是因为

newContent

中的

主体未填充），虽然代码在Firefox中工作，但我在使用ViolentMonkeyAs后续时无法加载，在webkit browers中，这似乎与XML漂亮的打印机有关（请参阅），因此不是document
类似于new DOMParser（）.parseFromString（document.getElementById（'webkit-XML-viewer-source-XML'）的结果.innerHTML，“text/xml”）应该是used@Trevi尼诺，4.5年来发生了很多变化，[greasemonkey]标记仅表示Firefox（与[tampermonkey]或[userscripts]标记类似）。如果需要，请打开一个新问题。仅供参考，Tampermonkey工作正常（至少在firefox中）。
<?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>

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