如何使用JavaScript / HTML文件运行XSL文件

时间:2010-06-10 12:28:51

标签: javascript

我想使用javascript函数运行xsl文件。我写了一个javascrpt函数,它可以很好地运行Firefox和Crom,但它不适用于Internet Explorer

     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("NewXml.xml");
        xsl=loadXMLDoc("NewFile.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);
          }
    }

请通过修改此代码或其他代码来帮助我,以便我可以使用Internet Explorer。

由于

1 个答案:

答案 0 :(得分:0)

要应用xsl trasformation,我使用并推广Sarissa。它是一个crossbrowser库,它包含了不同浏览器的xml apis。

有关Sarissa的转型示例,您可以直接前往howto page 但它与此类似:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>sarissa test1</title>
  <script type="text/javascript" src="sarissa.js"></script>
</head>
<body>
  <script type="text/javascript">
     function loadXMLDoc(dname) {
       xhttp = new XMLHttpRequest();
       xhttp.open("GET",dname,false);
       xhttp.send("");
      return xhttp.responseXML;
     }

     var processor = new XSLTProcessor();
     var theXML = loadXMLDoc('xml.xml');
     var theXSL = loadXMLDoc('xsl.xsl');

     // prepare the processor
     processor.importStylesheet(theXSL);

     var theResult = processor.transformToDocument(theXML);
     // now you have a DomDocument with the result
     // if you want to serialize (transform to a string) it you van use

     document.write(new XMLSerializer().serializeToString(theResult));  
  </script>
</body>
</html>

快速,轻松,精确,您可以专注于创建xsl而不是努力克服浏览器差异。

单个故障,对我来说是一个优点,但有人可能会将其视为限制,代码在GPL 2.1或更高版本下发布,或者,如果您更喜欢Apache License 2.0或更高版本

编辑:我的错误,我发布了一个旧的(错误的代码)而没有检查它。创建了一个新版本,在firefox,chrome,ie8,ie7上模仿你的脚本(并测试它),它运行完美无缺。我使用了谷歌搜索中找到的前两个xsl / xml(我在下面报告它们 完整性)。按原样和xsl / xml一起尝试代码。如果出现问题也报告故障(我们可以通过比更深入的错误描述更有效 - 不工作 - )。当代码行为异常时会发生什么? (浏览器冻结,报告错误,返回空白结果)

的xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!--?xml-stylesheet type="text/xsl" href="xsl.xsl"?-->
<tutorials>
  <tutorial>
    <name>XML Tutorial</name>
    <url>http://www.quackit.com/xml/tutorial</url>
  </tutorial>
  <tutorial>
    <name>HTML Tutorial</name>
    <url>http://www.quackit.com/html/tutorial</url>
  </tutorial>
</tutorials>

的xsl:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" 
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- try to enable/disable the xsl:output -->
<!-- xsl:output method="xml" 
                version="1.0" 
                encoding="iso-8859-1" 
                indent="yes"/-->

<xsl:template match="/">
<html>
<head>
<title>XML XSL Example</title>
<style type="text/css">
body
{
margin:10px;
background-color:#ccff00;
font-family:verdana,helvetica,sans-serif;
}

.tutorial-name
{
display:block;
font-weight:bold;
}

.tutorial-url
{
display:block;
color:#636363;
font-size:small;
font-style:italic;
}
</style>
</head>
<body>
<h2>Cool Tutorials</h2>
<p>Hey, check out these tutorials!</p>
  <xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="tutorial">
  <span class="tutorial-name"><xsl:value-of select="name"/></span>
  <span class="tutorial-url"><xsl:value-of select="url"/></span>
</xsl:template>

</xsl:stylesheet>