2

みんな！

いくつかの xml データ ファイルに基づいて Web サイトを構築しているので、XSLT を使用してブラウザーでスタイルシートをバインドすることにしました。

最初は非常にうまく機能しますが、最近、テンプレートがより複雑になるにつれて、奇妙なことが起こりました.

「copy-of」要素を使用して、データをスタイルシートにコピーします。コードは次のとおりです。

<div class="section1">
    <xsl:copy-of select="article/bodydata/*" />
</div>

したがって、基本的には、「bodydata」ノードのすべての子要素を <div /> にコピーしています。

しかし、うまくいきません。たとえば、bodydata に <img /> 要素があり、ブラウザーで xml ファイルにアクセスしてもその画像が表示されません。一方、「bodydata」要素をその div に手動でコピーし、.xsl ファイルを .html ファイルにすると、その画像が表示されます。

では、私の質問は、xml データと xsl データを組み合わせた出力をブラウザーで表示できますか? 拡張機能が必要ですか？

また、何が間違っている可能性があるかについての提案はありますか? 私は xslt にまったく慣れていないので、XSLT が実際に何をするのかを誤解しているようです。ありがとう！

アップデート

問題を説明するために、小さなサンプルを書きました。

まず、サンプルの xml データ ファイルを作成しました。

<?xml version='1.0' encoding='utf-8'?>
<?xml-stylesheet type="text/xsl" href="article.xsl"?>
<article>
    <bodydata>
        <center>
            <img alt="sample" src="http://www.google.com/logos/classicplus.png" />
        </center>
        <p>
          <data class="tts_data">
          this is the paragraph.
          </data>
        </p>
        <p>
          <data class="tts_data">this is the second paragraph</data>
          <data class="tts_data">more data</data>
          <data class="tts_data">...</data>
        </p>
    </bodydata>
</article>

したがって、「bodydata」要素のすべてのノードは、Web ページに表示する必要がある html 要素であることがわかります。それを表示するために、サンプルの xsl ファイルを作成しました。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
      <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <meta name="robots" content="noindex" />
        </head>
        <body>
          <article>
           <header>
                  header of the article
               </header>
               <section>
                  <xsl:copy-of select="article/bodydata/*" />
           </section>
      </article>
          <footer>
          footer part of the page
          </footer>
        </body>
     </html>
    </xsl:template>
</xsl:stylesheet>

結果は次 xslt の結果 のようになります: img 要素が消えます。

次に bodydata 要素をセクション部分にコピーし、新しい html ファイルを作成しました。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="noindex" />
</head>
<body>
  <article>
    <header>
     header of the article
    </header>
    <section>
      <center>
        <img alt="sample" src="http://www.google.com/logos/classicplus.png" />
      </center>
      <p>
        <data class="tts_data">
        this is the paragraph.
        </data>
      </p>
      <p>
        <data class="tts_data">
        this is the second paragraph, 
        </data>
        <data class="tts_data">
        more data
        </data>
        <data class="tts_data">...</data>
      </p>
  </section>
    </article>
    <footer>
    footer part of the page
    </footer>
  </body>
</html>

結果は次 htmlファイルの結果 のとおりです。画像が表示されます。

だから私はここで何が間違っているのだろうかと思っています。

4

2 に答える 2

3

問題を実証するために、最小限ではあるが完全なサンプルを示すことを検討してください。そうしないと、わかりにくいです。要素が子要素として HTML 要素を持っているxsl:copy-ofと仮定すると、私には正しいアプローチのように思えます。bodydata変換結果を見ると、最近ではほとんどのブラウザーに開発者ツールが付属しており (または、Firebug のようなものをインストールできます)、F12 を押してブラウザーでドキュメントの DOM ツリーを表示し、結果を調べることができます。結果ツリーにコピーされた要素が表示されない場合、一般的に名前空間の問題である可能性があります (つまり、名前空間なしの HTMLimgを XHTML 結果ドキュメントにコピーします)。そのため、どのブラウザーを試したか、どのブラウザーを使用したかなどの詳細をお知らせください。output変換結果として作成しようとしている HTML のバージョン (つまり、HTML 4.01、XHTML 1.0、HTML5)。

[編集] 結果ツリーの XHTML 1.0 名前空間で名前が付けられたルート要素を使用する現在のサンプルではhtml、​​Firefox/Mozilla は名前空間が重要な XML として結果をレンダリングします。img入力 XML から要素をコピーするとimg、名前空間のない要素が XHTML ドキュメントにコピーされます。そのため、要素に適切な名前空間がないため、ブラウザはその要素を XHTML 要素としてimg認識しません。したがって、コピーする (X)HTML のフラグメントに XHTML 名前空間を使用するように入力 XML を変更する必要があります。または、最近では名前空間のない HTML 4 または HTML5 に焦点を当てている私の見解では、単純に次のように使用します。スタイルシートの結果ツリー内のそのバージョンの HTML。つまり、ドキュメントのルート要素に名前空間を使用していません。imgimg<xsl:output method="html" version="4.01"/>、またはを設定します<xsl:output method="html" version="5.0"/>。そうすれば、問題は解決するはずです。

別の方法として、本当に結果を XHTML にしたいが、img名前空間のない XML 要素を XHTML 結果ツリーにコピーしたい場合、適切な方法は を使用せずcopy-of、代わりに を使用<xsl:apply-templates/>してから、次のように記述する必要があります。必要な要素を XHTML 名前空間に変換するテンプレート

<xsl:template match="img | p | center">
  <xsl:element name="{local-name()}" namespace="http://www.w3.org/1999/xhtml">
   <xsl:copy-of select="@*"/>
   <xsl:apply-templates/>
  </xsl:element>
</xsl:template>

名前空間のない HTML5 に焦点を当てているすべてのブラウザー ベンダーに対する私の見解では、XHTML に変換せず、代わりに名前空間のない HTML 4.01 または HTML5 をターゲットにすることをお勧めします。ブラウザーで XSLT 1.0 を使用すると、ブラウザー間の相互運用性が向上します。

于 2012-08-14T12:13:31.167 に答える
1

IE9 で XML ファイルを表示すると、必要な完全な結果が得られます。

ここに画像の説明を入力

更新：

Martin Honnen が示しているように、xsl:outputステートメントが欠落していると出力方法xml(デフォルト) が使用され、これがブラウザーが出力を HTML として扱わない原因となっています。

追加<xsl:output method="html"/>すると問題が解決します。

于 2012-08-14T13:17:45.123 に答える