如何在Mozilla Gecko 用Javascript加载XSL

  在Mozilla Develop Center里,我们可以看到有以下的文章:http://developer.mozilla.org/en/docs/The_XSLT/JavaScript_Interface_in_Gecko:Basic_Example

  首先,你需要了解如何动态载入xml文件的方法,可以用XMLDOM对象,也可以用XMLHttpRequest,的responseXML对象,这里我用的是XMLHttpRequest。

  用javascript载入xslt的方法如下:

  1。用XMLDOM或者用XMLHttpRequest来加载xml和xslt。

  2。用XSLTProcessor.importStylesheet来引入XSLT。

  3。用XSLTProcessor.transformToFragment方法来把它转换成DOM的Fragment。然后用appendChild或者用insertBefore等方法来追加或者插入这个DOM的fragment元素。

  示例代码

  var ownerDocument = document.implementation.createDocument("", "test", null);

  var newFragment = processor.transformToFragment(domToBeTransformed, ownerDocument);

  当然也可以用transformToDocument

  var newDocument = processor.transformToDocument(domToBeTransformed);

  需要注意的是,转换后的节点是Element或者是一个片段,所以要经过下面的序列化才可使用obj.innerHTML=new Document

  4。序列化。

  (new XMLSerializer()).serializeToString(newDocument)

  5。在IE中,可以用XMLDOM方法,xmldoc.transformNode(xslDocument)方法来进行接的转换。

  首先,我们先建立一个XML文件与XSLT文件,方便后面的讲解。

  foo.xml

  <?xml version="1.0" encoding="utf-8"?>

  <Article>

  <Title>javascript load xslt in ie and mozilla</Title>

  <Author>never-online</Author>

  <Web>http://www.never-online.net</Web>

  <Body>content is here</Body>

  </Article>

  foo.xsl

  <?xml version="1.0" encoding="utf-8"?>

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

  <xsl:output method="html" />

  <xsl:template match="/">

  <h1 class="title"><xsl:value-of select="/Article/Title"/></h1>

  <div class="desc">Author: <xsl:value-of select="/Article/Author"/> -

  Web: <xsl:value-of select="/Article/Web"/></div>

  <p class="box">

  <xsl:value-of select="/Article/Body"/>

  </p>

  </xsl:template>

  </xsl:stylesheet>

  foo.html

  <?xml version="1.0" encoding="UTF-8"?>

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <title> convert xsl using javascript - http://www.never-online.net </title>

  <meta http-equiv="ImageToolbar" content="no" />

  <meta name="author" content="never-online, BlueDestiny"/>

  <meta name="keywords" content="never modules, Mozilla CSS, C#, .net, Refercence, BlueDestiny, never-online"/>

  <meta name="description" content="BlueDestiny, never-online"/>

  <meta name="title" content=" - http://www.never-online.net" />

  <meta name="creator.name" content="never-online, BlueDestiny" />

  <style type="text/css" media="all" title="Default">

  .title { margin:10px 10% 0 10%; text-align:center; background-color:#639ACE; padding:10px; color:#fff; }

  .desc { margin:10px 10% 0 10%; text-align:center; }

  .box { margin:10px 10% 0 10%; border: 1px dotted #639ACE; padding:20px; }

  </style>

  <script type="text/javascript">

  //<![CDATA[

  //]]>

  </script>

  <body id="www.never-online.net">

  <div id="demo"></div>

  <script type="text/javascript">

  //<![CDATA[

  var xsltParser = function(xmlfileStr, xslfileStr) {

  var retval = xslStylesheet = xmlDocument = null;

  var browser = {

  isIE:!!window.ActiveXObject,

  isMozilla:(typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined')

  };

  var loadDocument = function (fileStr) {

  if (!fileStr) throw new Error([65221, "调用XMLHTTP错误,没有指定文件名。"]);

  var req = browser.isIE?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest();

  req.open("GET", fileStr, false);

  req.send(null);

  if (req.readyState==4 && req.status==200) { return req.responseXML; }

  else throw new Error([65222, "调用XMLHTTP错误,远程文件失败。"+fileStr+""]);

  };

  var ready2Transform = function () {

  xmlDocument = loadDocument(xmlfileStr);

  xslStylesheet = loadDocument(xslfileStr);

  }();

  var parseFromMoz = function () {

  var xsltProcessor = new XSLTProcessor();

  xsltProcessor.importStylesheet(xslStylesheet);

  var retval = xsltProcessor.transformToDocument(xmlDocument);

  return (new XMLSerializer()).serializeToString(retval);//序列化

  };

  var parseFromIE = function () {

  return xmlDocument.transformNode(xslStylesheet.documentElement);

  };

  if (browser.isMozilla) {

  retval = parseFromMoz(xmlfileStr, xslfileStr);

  }

  else if (browser.isIE) {

  retval = parseFromIE(xmlfileStr, xslfileStr);

  } else { /* TO DO */ ;}; return retval;

  }

  document.getElementById("demo").innerHTML=xsltParser("foo.xml","foo.xsl")

  //]]>

  </script>

  </body>

  </html>