16

いくつかのXSLファイルを使用してHTMLに変換したいXMLがいくつかあります。これらのXSLファイルはすべてxsl：importおよびxsl：includeステートメントを介して関連付けられており、変換を完了するためにすべて必要です。

<?xml-stylesheet type="text/xsl" href="transform.xsl"?>ブラウザーで開いた事前に作成されたXMLファイルでディレクティブを使用すると、必要な出力が表示されるため、XSLが機能することはわかっています。問題は、動的に生成されたXMLでこの機能を複製できるようにしたいということです。

これが可能であることがわかる2つの方法がありますが、どちらにも回避できない制限があるようです。

最初の解決策は、Javascriptを使用してXMLを変換することです。私の知る限り、これにはXSLTProcessorオブジェクトが複数のXSLファイルをロードする必要がありますが、Chrome（およびおそらく他のブラウザー）はxsl：importを十分にサポートしていません-http: //code.google.com/p/chromium/課題/詳細？id = 8441

XMLをiFrameまたは新しいウィンドウに書き込むことも検討しましたが、<?xml-stylesheet type="text/xsl" href="transform.xsl"?>ディレクティブは結果のウィンドウでコメント化されています。実際、新しいウィンドウに書き込まれるものはすべてHTMLです。XMLを新しいウィンドウに書き込む方法は見つかりませんでした。

では、XSLファイルのセットで変換されたXMLファイルの結果を表示するブラウザーウィンドウを取得するにはどうすればよいですか？

アップデート

それで、これがこの問題に関する私の研究の結果です。

考えられる回避策：emscriptenを使用してxsltprocなどのツールをJavaScriptにコンパイルします。私は実際にこれを行いました-https://github.com/mcasperson/xsltproc.jsを参照してください

問題：Firefoxでは非常に遅く（Chromeで5秒かかるものはFirefoxで30+かかります）、ChromeWebワーカーでコードを実行できません-https ://code.google.com/p/chromium/課題/詳細？id = 252492

考えられる回避策：XSLはまったく使用しないでください。ただし、CSSスタイルシートを使用してXMLを表示してください。

問題：ブラウザがcss attr(atrributename, url)関数の実装を開始するまで、XML属性のファイル参照を文字列以外のものとして扱う方法がないため、画像を表示できません。

考えられる回避策：すべてのXSLファイルを単一のスタイルシートにマージします

問題：これはある程度可能ですが（複数のxsltスタイルシートのマージを参照）、xsl：importまたはxsl：includeは、xsl：importまたはxsl：includeステートメントの代わりにファイルの内容を単に置き換える場合には引き継がれない特定のセマンティクスを持っています。複数のファイルに分割された大規模なXSL変換の場合、このソリューションでは多くの手動作業が必要になります。

考えられる回避策：XMLの内容をiframeまたは新しいウィンドウに書き出します。

問題：新しいウィンドウまたはiframeにXMLを書き込むことができません。これらの要素に書き込まれるコンテンツは常にHTMLであると見なされ、HTML->BODY要素に挿入されます。

考えられる回避策：XMLを受け取り、XSLスタイルシートディレクティブを使用してそのXMLを返すサーバー側サービスを作成します。その後、サービスURLをsrciframeまたは新しいウィンドウの属性として使用できます。

問題：サービスはGETエンドポイントである必要があります。つまり、返されるXMLをクエリパラメーターとして含める必要があります。つまり、最終的にURLの長さに関する問題が発生します。

考えられる回避策： SaxonicaCEのようなjavascriptXSLライブラリを使用します。

問題：これは実際には機能する可能性がありますが（私は試していません）、Saxonica CEはオープンソースではありません（これは私たちのプロジェクトの要件です）。

4

3 に答える 3

2

ブラウザのみのソリューションが必要な場合は、次のようにします。

静的 XML

xsl への呼び出しのみを含む単純な静的 xml を作成します。これは、ブラウザーで開かれる xml です - 常に。この xml ファイルには、この例のように、フローを制御するためのプロパティ設定が含まれていても、何も含まれていなくてもかまいません。

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="cartoon2html.xsl"?>
<xml/>

動的プレーン xml

定義済みの名前 (私の場合は cartoons.xml) を使用して、好きな方法で動的 XML を生成します。

<?xml version="1.0" encoding="utf-8"?>
<cartoons>
    <cartoon name="Donald Duck" publisher="Walt Disney" />
    <cartoon name="Mickey Mouse" publisher="Walt Disney" />
    <cartoon name="Batman" publisher="DC Comics" />
    <cartoon name="Superman" publisher="DC Comics" />
    <cartoon name="Iron Man" publisher="Marvel Comics" />
    <cartoon name="Spider-Man" publisher="Marvel Comics" />
</cartoons>

ドキュメントの読み込みを伴う XSLT

生成された動的 xml を参照するには、xslt でドキュメント ローンを使用します。最初の apply-templates で select を使用すると、他のすべてのテンプレートが意図したとおりに機能します。

コードの一番上とさらに下にある変数参照をよく見てください。ここでマジックが行われます。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:variable name="cartoons" select="document('cartoons.xml')/cartoons" />

    <xsl:template match="/">
        <html>
            <head>
                <title>Cartoons</title>
                <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
            </head>
            <body>
                <xsl:apply-templates select="$cartoons" />
            </body>
        </html>
    </xsl:template>

    <xsl:template match="cartoons">
        <table>
            <xsl:apply-templates />
        </table>
    </xsl:template>

    <xsl:template match="cartoon">
        <tr>
            <td><xsl:value-of select="@name" /></td>
            <td><xsl:value-of select="@publisher" /></td>
        </tr>
    </xsl:template>

</xsl:stylesheet>

これら 3 つのファイルを任意のディレクトリに保存し、静的 xml ファイルを firefox で開くことができます。(Chrome およびおそらく Safari では、変換を実行するために Web サーバーを介してファイルを提供する必要があります)。

于 2013-01-10T10:41:37.000 に答える
1

jquery を使用して XML のインポートとスタイル設定を行うことをお勧めします。

このようなものを使用すると、関数が呼び出されるたびに XML をインポートできます (関数はキープレス、更新ボタン、またはタイマーにリンクされています)。

$.ajax({
    type: "GET",
    url: "FILENAME.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find('site').each(function(){ //finds parent node
            var id = $(this).attr('id'); //id of parent node
            var title= $(this).find('title').text();  //finds title node within parent node
            var url = $(this).find('url').text(); //finds URL node within parent node
            var description = $(this).find('descr').text(); //etc...
            var img = $(this).find('img').text(); //etc...

            // Creates div with id of parent node (for individual styling)
            $('<div id="link_'+id+'">')
                .addClass('add a div class')
            //sets css of div
                .css({set css})
            // Sets the inner HTML of this XML allocated div to hyperlinked 'title' with 'description' and an 'img'
                .html('<a href="'+url+'">'+title+'</a>'+description+'<img src="'+img+'">')                  
            // Append the newly created element to body
                .appendTo('#holder');
    }
    }
})

XML は次のようになります。

<site id="0">
 <url>http://blah.com</url>
 <img>imgs/image1.png</img>
 <description>this is a description</description>
 <title>Title</title>
</site>

<site id="1">
 <url>http://filler.com</url>
 <img>imgs/image2.jpg</img>
 <description>this is another description</description>
 <title>Title 2</title>
</site>

もちろん、div にインポートする代わりに、XML をテーブルやその他の種類の HTML 要素にインポートすることもできます。

于 2012-12-30T00:06:00.717 に答える