Загрузка/преобразование XML с помощью XSLT и CSS

Полный новичок. Заранее спасибо. Вот оно:

Я пытаюсь преобразовать XML-документ с помощью таблицы стилей XSL, а таблица стилей XSL ссылается на файл CSS. Когда я открываю файл XML со своего компьютера в браузере (Chrome), данные отображаются правильно после файлов XSL и CSS. У меня также есть математические функции javascript внутри таблицы стилей XSL, чтобы взять элемент из файла XML и умножить его на разные проценты. Эта математика тоже работает.

Но когда я пытаюсь использовать Javascript (ниже) для загрузки/преобразования XML-документа в HTML, стиль XSL проходит, но CSS отключен. В Chrome отображается макет страницы из CSS. Но размер шрифта слишком мал, и фоновое изображение не появляется. Независимо от того, что я меняю в CSS, шрифт едва читается, он такой маленький. В IE CSS вообще не отображается.

Кроме того, Javascript, похоже, скрывает данные xml, что, я думаю, плохо для SEO.

У кого-нибудь есть советы/разные подходы? Я не могу использовать ASP, потому что мой веб-сервер этого не позволяет, но что-нибудь еще.

Вот скрипт из моего html-документа:

<html>
<head>
  <script>
  function loadXMLDoc(dname) {
    if (window.XMLHttpRequest) {
      xhttp = new XMLHttpRequest();
    } else {
      xhttp = new ActiveXObject("Microsoft.XMLHTTP");  
    } 
    xhttp.open("GET",dname,false);
    xhttp.send("");
    return xhttp.responseXML;
  }

  function displayResult() {
    xml = loadXMLDoc("WORKS.xml");
    xsl = loadXMLDoc("WORKS.xsl");

    // code for IE
    if (window.ActiveXObject) {
      ex = xml.transformNode(xsl);  
      document.getElementById("example").innerHTML = ex;
    }

    // code for Mozilla, Firefox, Opera,etc.
    else if (document.implementation && 
             document.implementation.createDocument) {
      xsltProcessor=new XSLTProcessor();
      xsltProcessor.importStylesheet(xsl);  
      resultDocument = xsltProcessor.transformToFragment(xml,document);
      document.getElementById("example").appendChild(resultDocument);
    }
  }
  </script>
</head>
<body onload="displayResult()">
  <div id="example" />
</body>
</html>

Ведра Мерси.

Алан


javascript xml css xslt
person Alan    schedule 23.11.2009    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это действительно зависит от содержимогоworks.xml иworks.xsl. Предложение: вывести результатДокумент в текстовую область и посмотреть, выглядит ли html нормально. В этот момент вы также можете сохранить => загрузить html resultDocument в Chrome/IE и убедиться, что он выглядит хорошо.

Как только вы узнаете, что в html вызывает проблемы, вам будет легче найти причину и исправить ее.

Вы можете увидеть выходной html, добавив:

<textarea cols="255" rows="50" id="textarea1"></textarea>

Ниже вашего примера тега div.
и:

document.getElementById("textarea1").value = document.getElementById("example").innerHTML;

в конце displayResult(). чтобы увидеть результат.

Обратите внимание, что ваш xslt является фрагментом, а не целым html-документом, он не должен содержать тегов html/head/body и выглядеть примерно так:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="/">

    <!--<html>

      <head>-->

        <link rel="stylesheet" href="galleryCSS.css" type="text/css" />

      <!--</head>


      <body>-->

        <h2>Choosy Child Guaranteed BuyBack System</h2>

        <ul class="gallery">

          <xsl:for-each select="WORKS/item">
            <li>

              <a href="picture1.jpg">
                <img src="picture1.jpg" alt="image" />
              </a>
              <em>
                <xsl:value-of select="name"/>
              </em>
              <br />
              Buy Price: <em>
                $<xsl:value-of select="price"/>
              </em>
              <br />
              1-4 Day BuyBack: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.15;             document.write(Math.round(x*100)/100);
                </script>
              </em>
              <br />
              5-7 Day BuyBack: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.25;             document.write(Math.round(x*100)/100);
                </script>
              </em>
              <br />
              8-14 Day BuyBack: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.40;             document.write(Math.round(x*100)/100);
                </script>
              </em>
              <br />
              15-30 Day BuyBack: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.60;             document.write(Math.round(x*100)/100);
                </script>
              </em>
              <br />
              30+ Day Buyback: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.75;             document.write(Math.round(x*100)/100);
                </script>
              </em>

            </li>

          </xsl:for-each>

        </ul>


<!--
      </body>
    </html>-->

  </xsl:template>

</xsl:stylesheet>

Есть и другие способы сократить и упростить код и не повторять тег script, но это выходит за рамки этого вопроса.

person MandoMando    schedule 23.11.2009
comment
Спасибо за Ваш ответ. Не могли бы вы указать мне правильное направление для правильного размещения инструкции resultDocument? Все примеры resultDocument, которые я смог найти, не были похожи на мой документ .xsl, который уже отформатирован так, чтобы отображать HTML: choosychildclothing.com/gallery/WORKS.xsl XML, который он преобразует, является лишь примером: choosychildclothing.com/gallery/WORKS.xml Большое спасибо. - person Alan; 23.11.2009
comment
Ваше размещение документа результата выглядит правильно. Глядя на ваш файл xsl, я заметил, что у вас есть теги ‹HTML› и ‹HEAD›. Однако вы вставляете resultDocument как NODE в уже существующий HTML-документ. Попробуйте удалить теги html, head и body и попробуйте. Это должно исправить это. - person MandoMando; 23.11.2009