How to display XSLT in IE 8 and Chrome with javascript and three XML files?

2023-03-30 03:46 问答作者：

Internet Explorer 8: Google Chrome version 13: Javascript: XSLT: XML:

In IE 8 nothing popluates but opera and firefox are just fine. When I load the javascript in Chrome 13.1 the first xml doc shows up and the 2nd and 3rd do not show up at all. I am referencing the three xml files in the xslt file. The javascript is from w3shools. How can I get these to populate in IE and 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>

As alternative approach you could use simpler, non-JavaScript, browser's client side XSL tranformation, without load_xml_javascript.html file, just add into delivery.xml (just below XML declaration) following line:

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

Tested (displaying three tables) on:

Internet Explorer 8
Firefox 6
Opera 11.50
Google Chrome 13, however for local (without web server) transformations you need run browser it with --allow-file-access-from-files switch
Safari 5.1

For JavaScript based solution tables (second and third) are empty in Google Chrome 13 because document() function doesn't work properly under Webkit engine. Take a look at:

Webkit Bug 60276
Chromium Issue 8441

For Internet Explorer 8 (as well as 9) your simplified initial code looks:

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;
    }
}

Use F12 to debug it, you should see error message (de facto the same issue as in here):

Access is denied

However you could try following code instead:

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;
    }
}

To display page properly cut these attributes:

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

As you see it's much easier to use browser's native XSL transformation, rather than JavaScript based.

IE has never supported XHTML till IE9. IE is always a problem and you will have further problems in areas that require MSXML for its non-standard stuff. Sorry I can't be more specific or helpful since it's been a year since I've worked in this realm.

继续阅读：google-chrome internet-explorer javascript xml xslt

How to display XSLT in IE 8 and Chrome with javascript and three XML files?

更多精彩内容

精彩评论

最新问答

央视是哪个频道？

请问买过的朋友，舒提啦旅行箱实际使用体验如何？？

检查不孕不育需要的费用？

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？