Как отобразить XSLT в IE 8 и Chrome с JavaScript и тремя файлами XML? - PullRequest
2 голосов
/ 23 августа 2011

Internet Explorer 8: Google Chrome версии 13: Javascript: XSLT: XML:

В IE 8 ничего не всплывает, но Opera и Firefox просто отлично. Когда я загружаю javascript в Chrome 13.1, отображается первый документ XML, а 2-й и 3-й вообще не отображаются. Я ссылаюсь на три xml-файла в xslt-файле. Javascript от w3shools. Как я могу получить их для заполнения в IE и Chrome?

Files:
load_xml_javascript.html
delivery_and_activity.xsl
delivery.xml
activity.xml
click_through.xml

load_xml_javascript.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("delivery.xml");
xsl=loadXMLDoc("delivery_activity_clickthrough.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>

delivery_and_activity.xsl

<?xml version="1.0" encoding="utf-8"?>
<!-- DWXMLSource="delivery.xml" -->
<!DOCTYPE xsl:stylesheet  [
    <!ENTITY nbsp   "&#160;">
    <!ENTITY copy   "&#169;">
    <!ENTITY reg    "&#174;">
    <!ENTITY trade  "&#8482;">
    <!ENTITY mdash  "&#8212;">
    <!ENTITY ldquo  "&#8220;">
    <!ENTITY rdquo  "&#8221;"> 
    <!ENTITY pound  "&#163;">
    <!ENTITY yen    "&#165;">
    <!ENTITY euro   "&#8364;">
]>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-

system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Delivery Summary</title>
    </head>
    <body>
    <h2 style="margin: 25px 0px -20px 30px; color: #003399;">Delivery Summary</h2>
    <table style="margin: 25px; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; text-align:left; font-size:12px; 

border-collapse:collapse">
      <thead>
        <tr>
          <th width="165" height="30" scope="col" style="background: #b9c9fe url('left.png') left -1px no-repeat; color: #003399; 

padding: 8px;">Type</th>
          <th width="209"  scope="col" style="background: #b9c9fe; color: #003399; padding: 8px;">% of Attempted to Deliver</th>
          <th width="90" scope="col" style="background: #b9c9fe url('right.png') right -1px no-repeat; padding: 8px; color: 

#003399;">Total</th>
        </tr>
      </thead>
      <tfoot>
      </tfoot>
      <tbody>
        <xsl:for-each select="DELIVERY/SUMMARY">
          <tr>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="TITLE"/></td>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="ATTEMPTED"/></td>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="TOTAL"/></td>
          </tr>
        </xsl:for-each>
      </tbody>
    </table>
    <h2 style="margin: 25px 0px -20px 30px; color: #003399;">Activity Summary</h2>
    <table style="margin: 25px; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; text-align:left; font-size:12px; 

border-collapse:collapse">
      <thead>
        <tr>
          <th width="165" height="30" scope="col" style="background: #b9c9fe url('left.png') left -1px no-repeat; color: #003399; 

padding: 8px;">Type</th>
          <th width="209"  scope="col" style="background: #b9c9fe; color: #003399; padding: 8px;">% of Successfully Delivered</th>
          <th width="90" scope="col" style="background: #b9c9fe url('right.png') right -1px no-repeat; padding: 8px; color: 

#003399;">Total</th>
        </tr>
      </thead>
      <tfoot>
      </tfoot>
      <tbody>
         <xsl:for-each select="document('activity.xml')/ACTIVITY/SUMMARY">
          <tr>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="TITLE"/></td>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="ATTEMPTED"/></td>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="TOTAL"/></td>
          </tr>
        </xsl:for-each>
      </tbody>
    </table>
        <h2 style="margin: 25px 0px -20px 30px; color: #003399;">Click Through Report</h2>
    <table style="margin: 25px; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; text-align:left; font-size:12px; 

border-collapse:collapse">
      <thead>
        <tr>
          <th width="165" height="30" scope="col" style="background: #b9c9fe url('left.png') left -1px no-repeat; color: #003399; 

padding: 8px;">Type</th>
          <th width="209"  scope="col" style="background: #b9c9fe; color: #003399; padding: 8px;">% of Successfully Delivered</th>
          <th width="90" scope="col" style="background: #b9c9fe url('right.png') right -1px no-repeat; padding: 8px; color: 

#003399;">Total</th>
        </tr>
      </thead>
      <tfoot>
      </tfoot>
      <tbody>
         <xsl:for-each select="document('click_through.xml')/ACTIVITY/SUMMARY">
          <tr>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="URL"/></td>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="UNIQUE"/></td>
            <td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of 

select="TOTAL"/></td>
          </tr>
        </xsl:for-each>
      </tbody>
    </table>
    </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

delivery.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<DELIVERY>
    <SUMMARY>
        <TITLE>Attempted to deliver</TITLE>
        <ATTEMPTED>100</ATTEMPTED>
        <TOTAL>21256</TOTAL>
    </SUMMARY>
    <SUMMARY>
        <TITLE>Hard Bounces</TITLE>
        <ATTEMPTED>.68</ATTEMPTED>
        <TOTAL>145</TOTAL>
    </SUMMARY>
    <SUMMARY>
        <TITLE>Soft Bounces</TITLE>
        <ATTEMPTED>4.48</ATTEMPTED>
        <TOTAL>953</TOTAL>
    </SUMMARY>
    <SUMMARY>
        <TITLE>Successfully delivered</TITLE>
        <ATTEMPTED>94.8</ATTEMPTED>
        <TOTAL>20158</TOTAL>
    </SUMMARY>
</DELIVERY>

activity.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<ACTIVITY>
    <SUMMARY>
        <TITLE>Opened</TITLE>
        <ATTEMPTED>22.96</ATTEMPTED>
        <TOTAL>4629</TOTAL>
    </SUMMARY>
    <SUMMARY>
        <TITLE>Clicked Through</TITLE>
        <ATTEMPTED>4.10</ATTEMPTED>
        <TOTAL>829</TOTAL>
    </SUMMARY>
    <SUMMARY>
        <TITLE>Replied</TITLE>
        <ATTEMPTED>0.12</ATTEMPTED>
        <TOTAL>24</TOTAL>
    </SUMMARY>
    <SUMMARY>
        <TITLE>Unsubscribed</TITLE>
        <ATTEMPTED>0.25</ATTEMPTED>
        <TOTAL>51</TOTAL>
    </SUMMARY>
        <SUMMARY>
        <TITLE>Forwarded</TITLE>
        <ATTEMPTED>0.00</ATTEMPTED>
        <TOTAL>0</TOTAL>
    </SUMMARY>
        <SUMMARY>
        <TITLE>Subscribed</TITLE>
        <ATTEMPTED>0.00</ATTEMPTED>
        <TOTAL>0.00</TOTAL>
    </SUMMARY>
        <SUMMARY>
        <TITLE>SpamComplaints</TITLE>
        <ATTEMPTED>0.3</ATTEMPTED>
        <TOTAL>6</TOTAL>
    </SUMMARY>
</ACTIVITY>

click_through.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<ACTIVITY>
    <SUMMARY>
        <URL>navbar weddings</URL>
        <UNIQUE>1</UNIQUE>
        <TOTAL>1</TOTAL>
    </SUMMARY>
        <SUMMARY>
        <URL>navbar honeymoon</URL>
        <UNIQUE>1</UNIQUE>
        <TOTAL>1</TOTAL>
    </SUMMARY>
        <SUMMARY>
        <URL>submit rfp</URL>
        <UNIQUE>1</UNIQUE>
        <TOTAL>1</TOTAL>
    </SUMMARY>
</ACTIVITY>

Ответы [ 2 ]

4 голосов
/ 23 августа 2011

В качестве альтернативного подхода вы можете использовать более простое преобразование XSL на стороне клиента, не поддерживающее JavaScript, без load_xml_javascript.html файла, просто добавьте в delivery.xml (чуть ниже объявления XML) следующую строку:

<?xml-stylesheet type="text/xsl" href="delivery_and_activity.xsl"?>

Проверено (отображаются три таблицы) на:

  • Internet Explorer 8
  • Firefox 6
  • Опера 11.50
  • Google Chrome 13, однако для локальных (без веб-сервера) преобразований необходимо запустить браузер с помощью --allow-file-access-from-files switch
  • Safari 5.1

Для таблиц решений на основе JavaScript (второй и третий) в Google Chrome 13 пусто, поскольку функция document() не работает должным образом в движке Webkit. Взгляните на:

Для Internet Explorer 8 (как и 9) ваш упрощенный исходный код выглядит так:

function loadXMLDoc(dname)
{
    var xhttp;
    if (window.XMLHttpRequest)
        xhttp = new XMLHttpRequest();

    xhttp.open("GET", dname, false);
    xhttp.send("");
    return xhttp.responseXML;
}

function displayResult()
{
    var xml = loadXMLDoc("delivery.xml");
    var xsl = loadXMLDoc("delivery_and_activity.xsl");
    if (window.ActiveXObject)
    {
        var output = xml.transformNode(xsl);
        document.getElementById("example").innerHTML = output;
    }
}

Используйте F12 для его отладки, вы должны увидеть сообщение об ошибке (де-факто такая же проблема , как в здесь ):

Доступ запрещен

Однако вы можете попробовать следующий код:

function loadXMLDoc(filePath)
{
    var xmlDoc;
    if (window.ActiveXObject)
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.validateOnParse = false;
        xmlDoc.load(filePath);
    }
    return xmlDoc;
}
function displayResult()
{
    var xml = loadXMLDoc("delivery.xml");
    var xsl = loadXMLDoc("delivery_and_activity.xsl");
    if (window.ActiveXObject)
    {
        var output = xml.transformNode(xsl);
        document.getElementById("example").innerHTML = output;
    }
}

Для правильного отображения страницы вырежьте следующие атрибуты:

doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

Как видите, гораздо проще использовать встроенное в браузер XSL-преобразование, чем на основе JavaScript.

0 голосов
/ 23 августа 2011

IE никогда не поддерживал XHTML до IE9.IE всегда проблема, и у вас будут другие проблемы в областях, где MSXML требует нестандартного содержимого.Извините, я не могу быть более конкретным или полезным, так как прошел год с тех пор, как я работал в этой области.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...