Fatal编程技术网
  • javascript/
  • 如何使用javascript和三个XML文件在IE8和Chrome中显示XSLT？

如何使用javascript和三个XML文件在IE8和Chrome中显示XSLT？

javascript xml internet-explorer xslt google-chrome

如何使用javascript和三个XML文件在IE8和Chrome中显示XSLT？,javascript,xml,internet-explorer,xslt,google-chrome,Javascript,Xml,Internet Explorer,Xslt,Google Chrome,Internet Explorer 8： 谷歌Chrome 13版： Javascript: XSLT: XML: 在IE8中，除了opera和firefox之外，没有什么流行的东西。当我在Chrome13.1中加载javascript时，第一个xml文档显示出来，第二个和第三个根本不显示。我正在引用xslt文件中的三个xml文件。javascript来自w3schools。 如何在IE和Chrome中填充这些内容 Files: load_xml_javascript.html delivery

Internet Explorer 8： 谷歌Chrome 13版： Javascript: XSLT: XML:

在IE8中，除了opera和firefox之外，没有什么流行的东西。当我在Chrome13.1中加载javascript时，第一个xml文档显示出来，第二个和第三个根本不显示。我正在引用xslt文件中的三个xml文件。javascript来自w3schools。 如何在IE和Chrome中填充这些内容

Files:
load_xml_javascript.html
delivery_and_activity.xsl
delivery.xml
activity.xml
click_through.xml
加载\u xml\u 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>


函数loadXMLDoc（dname）
{
if（window.XMLHttpRequest）
{
xhttp=newXMLHttpRequest（）；
}
其他的
{
xhttp=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
xhttp.open（“GET”、dname、false）；
xhttp.send（“”）；
返回xhttp.responseXML；
}
函数displayResult（）
{
xml=loadXMLDoc（“delivery.xml”）；
xsl=loadXMLDoc（“delivery\u activity\u clickthrough.xsl”）；
//IE代码
if（window.ActiveXObject）
{
ex=xml.transformNode（xsl）；
document.getElementById（“示例”）.innerHTML=ex；
}
//Mozilla、Firefox、Opera等的代码。
else if（document.implementation&&document.implementation.createDocument）
{
xsltProcessor=新的xsltProcessor（）；
导入样式表（xsl）；
resultDocument=xsltProcessor.transformToFragment（xml，文档）；
document.getElementById（“示例”）.appendChild（resultDocument）；
}
}
交付和活动.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>


试图交付
100
21256
硬弹跳
.68
145
软弹跳
4.48
953
成功交付
94.8
20158
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>


开的
22.96
4629
点击通过
4.10
829
回答
0.12
24
取消订阅
0.25
51
转发
0
0
订阅
0
0
垃圾抱怨者
0.3
6.
单击_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>


纳夫巴婚礼
1.
1.
纳夫巴蜜月酒店
1.
1.
提交招标书
1.
1.
直到IE9，IE才支持XHTML。IE始终是一个问题，在需要MSXML作为其非标准内容的领域，您将遇到更多问题。很抱歉，我已经在这个领域工作了一年了，所以我不能说得更具体或更有用。

作为替代方法，您可以使用更简单的、非JavaScript的浏览器客户端XSL转换，而不必加载xml\U JavaScript.html文件，只需添加到
delivery.xml
（就在xml声明下面）以下行：

<?xml-stylesheet type="text/xsl" href="delivery_and_activity.xsl"?>
使用F12进行调试时，您应该会看到错误消息（事实上是与中相同的问题）：

访问被拒绝

但是，您可以尝试以下代码：

函数加载xmldoc（文件路径）
{
var-xmlDoc；
if（window.ActiveXObject）
{
xmlDoc=新的ActiveXObject（“Microsoft.XMLDOM”）；
xmlDoc.async=false；
xmlDoc.validateOnParse=false；
load（filePath）；
}
返回xmlDoc；
}
函数displayResult（）
{
var xml=loadXMLDoc（“delivery.xml”）；
var xsl=loadXMLDoc（“delivery_and_activity.xsl”）；
if（window.ActiveXObject）
{
var output=xml.transformNode（xsl）；
document.getElementById（“示例”）.innerHTML=输出；
}
}
要正确显示页面，请剪切以下属性：

doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
正如您所见，使用浏览器的原生XSL转换比使用基于JavaScript的转换要容易得多。

感谢alot Grzegorz。最重要的是，每隔72小时就会在服务器上转储一个新的xml文件（报告）。我有一个html页面（带有页眉页脚sidenav body），需要在body区域动态更新（根据新的xml文档）。如果我想知道在哪里使用浏览器转换，它只会呈现xml和xslt？我需要包括页眉页脚和侧边导航。这就是为什么我想使用javascript方法，以便在数据周围放置一个“包装器”。@mikenichols:没错。它将只呈现xml和xsl，但您可以将页眉、页脚等（甚至一些javascript cde）添加到xsl样式表中。还考虑使用服务器端XSLT，浏览器只得到最终的HTML。服务器端XSLT听起来非常好。我会调查的。非常感谢你，格热戈兹。@mikenichols:不客气。你可能会考虑接受这个答案（点击附加的白点）。Hi Grzegorz，我在这里发布了一个Ajax问题，也许你有一些见解。谢谢你的反馈，罗布。