2

クエリを入力できるテスト ページを提供する検索サーバーがあり、結果が XML で返されます。よりユーザーフレンドリーな方法で結果を確認できるようにしたいので、XSLT をいじり始めました。今では単純なスタイルシートを作成して、何とか肥大化した XML をデータの一部だけを示す単純なテーブルに変換しています。これは、ローカルで行う場合、つまり、XSL 宣言を XML に追加してから、Firefox などのブラウザーで XML を開く場合に問題なく機能します。

私がやりたいことは、そのテスト ページを介してサーバーから結果を取得するとすぐに、この変換をブラウザーにライブで適用することです。少し調べたところ、javascript でこれを行うことが可能であることがわかりました。

次に、JavaScript をページに動的に挿入できる Greasemonkey ユーザースクリプトについて考えました。テスト ページから XML の結果を取得するときに起動するスクリプトが必要です。しかし、Greasemonkey が XML ファイルでのスクリプトの実行を許可していないように見えるため (少なくとも Firefox では)、私はそこで立ち往生しています。

ごく少数の例を見つけて、それらをインスピレーションとして使用しようとしましたが、機能させることができませんでした. （たとえば、これは 1 つです。）

取得している XML の簡単な例を次に示します。

<?xml version="1.0" encoding="utf-8"?>
<Results>
    <Result>
        <Listings total="2">
            <Res>
                <Result index="0">
                    <id>123456</id>
                    <name>My Business</name>
                    <category>Restaurants</category>
                    <phone>9872365</phone>
                </Result>
            </Res>
            <Res>
                <Result index="1">
                    <id>876553</id>
                    <name>Some Other Business</name>
                    <category>Restaurants</category>
                    <phone>9834756</phone>
                </Result>
            </Res>
        </Listings>
    </Result>
</Results>

これがGreasemonkeyにロードしているスクリプトです-何も起こっていません：

// ==UserScript==
// @name test xml renderer
// @namespace http://sample.com
// @description stylesheet for xml results
// @include *
// ==/UserScript==

(function () {
    var xsl_str = '<?xml version="1.0" encoding="utf-8"?>\n\
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">\n\
    <xsl:output method="html"/>\n\
    <xsl:template match="/">\n\
        <html>\n\
            <head></head>\n\
            <body>\n\
                <table id="results" border="1" cellspacing="0" cellpadding="0">\n\
                    <thead>\n\
                        <tr>\n\
                            <th class="name">id</th>\n\
                            <th class="name">category ID</th>\n\
                            <th class="name">name</th>\n\
                            <th class="name">phone</th>\n\
                        </tr>\n\
                    </thead>\n\
                    <tbody>\n\
                        <xsl:for-each select="Results/Result/Listings/Res">\n\
                            <tr>\n\
                                <td class="small" width="120">\n\
                                    <xsl:value-of select="Result/id"/>\n\
                                </td>\n\
                                <td class="small" width="120">\n\
                                    <xsl:value-of select="Result/category"/>\n\
                                </td>\n\
                                <td class="small" width="120">\n\
                                    <xsl:value-of select="Result/name"/>\n\
                                </td>\n\
                                <td class="small" width="120">\n\
                                    <xsl:value-of select="Result/phone"/>\n\
                                </td>\n\
                            </tr>\n\
                        </xsl:for-each>\n\
                    </tbody>\n\
                </table>\n\
            </body>\n\
        </html>\n\
    </xsl:template>\n\
</xsl:stylesheet>\n\
';

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

    processor.importStylesheet(dataXSL);
    dataXML = document;
    var ownerDocument = document.implementation.createDocument("", "", null);
    var newFragment = processor.transformToFragment(dataXML, ownerDocument);
    dataXML.documentElement.replaceChild(newFragment, dataXML.documentElement.firstChild);
})();

Greasemonkey でこのスクリプトを有効にすると、すべてのページが XSL テンプレートの上記の HTML に正常に置き換えられます。ただし、ローカル XML ファイルまたはサーバーからの XML には適用されないようです (Greasemonkey をローカル ファイルで動作させるにはabout:config、Firefoxで設定を変更する必要があることを知っていますextensions.greasemonkey.fileIsGreaseable)。

私は JavaScript の経験がないので、非常に基本的な間違いを犯している可能性が高いです。場合によっては、すべてのヘルプに本当に感謝しています。

4

2 に答える 2

2

そのスクリプトは nuking または に追加していdocument.headます。ドキュメント全体を変換されたコンテンツに置き換えたい。適切に構築されたURLに変更することで、これを行うことができます。しかし、よりきちんとしたアプローチは、全体を置き換えることです。location.hrefdata:document.documentElement

このスクリプトは、テスト/サンプル XML ファイルで機能します。

// ==UserScript==
// @name        _Test XML Renderer
// @description stylesheet for xml results
// @include     http://YOUR_SERVER.COM/YOUR_PATH/*.xml
// @grant       none
// ==/UserScript==

var xsl_str = '<?xml version="1.0" encoding="utf-8"?>\n\
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">\n\
    <xsl:output method="html"/>\n\
    <xsl:template match="/">\n\
        <html>\n\
            <head></head>\n\
            <body>\n\
                <table id="results" border="1" cellspacing="0" cellpadding="0">\n\
                    <thead>\n\
                        <tr>\n\
                            <th class="name">id</th>\n\
                            <th class="name">category ID</th>\n\
                            <th class="name">name</th>\n\
                            <th class="name">phone</th>\n\
                        </tr>\n\
                    </thead>\n\
                    <tbody>\n\
                        <xsl:for-each select="Results/Result/Listings/Res">\n\
                            <tr>\n\
                                <td class="small" width="120">\n\
                                    <xsl:value-of select="Result/id"/>\n\
                                </td>\n\
                                <td class="small" width="120">\n\
                                    <xsl:value-of select="Result/category"/>\n\
                                </td>\n\
                                <td class="small" width="120">\n\
                                    <xsl:value-of select="Result/name"/>\n\
                                </td>\n\
                                <td class="small" width="120">\n\
                                    <xsl:value-of select="Result/phone"/>\n\
                                </td>\n\
                            </tr>\n\
                        </xsl:for-each>\n\
                    </tbody>\n\
                </table>\n\
            </body>\n\
        </html>\n\
    </xsl:template>\n\
</xsl:stylesheet>\n\
';

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
);
于 2013-08-02T04:27:13.370 に答える
0

これをコメントに追加したかったのですが、関連する評判がありません。私が確認することは2つあります。特に、これが文字列で機能しており、あなたが言ったようなサーバーからのファイルではない場合

  1. サーバーから取得しているものはオブジェクトではなく文字列であることを確認してください
  2. サーバーから取得している xml が正しいことを確認してください。

文字列を取得していない場合は、ajax リクエストを実行して xml からテキストを取得できます。そして、それを新しい xml 変数としてロードします。

XML を使いやすくしたいだけなら、
http://code.google.com/p/vkbeautify
と
http://google-code-prettify.googlecode.com/svn/trunk/を確認することをお勧めします。 README.html

それらは、読みやすいようにスタイルを設定しながら、xml 形式を維持する必要があります。さらに、グリースモンキーをいじる必要はなく、代わりに JavaScript を使用できます。

于 2013-08-01T15:43:26.983 に答える