April 20, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

JavaScript XSLT Support in Firefox

  • September 6, 2006
  • By Nicholas Zakas
  • Send Email »
  • More Articles »

Beginning in Firefox 1.0, a new object called XSLTProcessor has been available to JavaScript developers in order to enable client-side XSLT transformations. This object uses Firefox's built-in XSLT processor, Transformiix, to enable this functionality.

The first step in the transformation is to load both the XML and XSLT into DOMs:

oXmlDom.load("employees.xml");
oXslDom.load("employees.xslt");

Then, create the XSLTProcessor and use the importStylesheet() method to assign the XSLT DOM:

var oProcessor = new XSLTProcessor()
oProcessor.importStylesheet(oXslDom);

The last step is to call either transformToDocument() or transformToFragment() with the XML DOM as an argument to produce a result. As you may have guessed, transformToDocument() returns a new DOM document as its result and transformToFragment() returns a new document fragment as its result. Generally speaking, you should use transformToDocument() unless you intend to add the result directly to an existing document; then you should use transformToFragment().

When using transformToDocument(), just pass in the XML DOM and use the result as another completely different DOM:

var oResultDom = oProcessor.transformToDocument(oXmlDom);
alert(oResultDom.xml);

When using transformToFragment(), pass in the XML DOM as well as the document you intend to add the result to. This ensures that the new document fragment is valid in the destination document:

var oResultFragment = oProcessor.transformToDocument(oXmlDom, document);
var oDiv = document.getElementById("divResult");
oDiv.appendChild(oResultFragment);

In the previous example, the processor creates a fragment owned by the document object. This enables the fragment to be added to a <div/> element existing in the page.

This all makes perfect sense when the output method for XSLT is either HTML or XML, but what about when the output is text? To solve this problem, Firefox creates an XML document with a single element, <transformiix:result/>, that contains all the text output. So, using text output from an XSLT file still results in a valid document or document fragment.

Keeping this in mind, it's possible to create a version of IE's transformNode() method for Firefox. This can be done by adding a method to the Node object's prototype:

Node.prototype.transformNode = function (oXslDom) {
    var oProcessor = new XSLTProcessor();
    oProcessor.importStylesheet(oXslDom);
    var oResultDom = oProcessor.transformToDocument(this);
    var sResult = oResultDom.xml;
    if (sResult.indexOf("<transformiix:result") > -1) {
        sResult = sResult.substring(sResult.indexOf(">") + 1, 
                                    sResult.lastIndexOf("<"));
    }
    return sResult;                
};

This method creates a result document using the given XSLT DOM. The resulting XML code is then stored in sResult using the xml property defined earlier in the chapter. That code is then checked to see if it contains <transformiix:result/>. If it does, then the XML part is stripped out (by taking only the string between the first greater-than symbol and the last less-than symbol). Lastly, sResult is returned. Using this method, you can create code to run in both Firefox and IE:

oXmlDom.load("employees.xml");
oXslDom.load("employees.xslt");
alert(oXmlDom.transformNode(oXslDom));

The XSLTProcessor in Firefox also allows you to set XSLT parameters. The setParameter() method accepts three arguments: the namespace URI, the parameter local name, and the value to set. Typically, the namespace URI is null and the local name is simply the parameter's name. This method must be called prior to transformToDocument() or transformToFragment():

var oProcessor = new XSLTProcessor()
oProcessor.importStylesheet(oXslDom);
oProcessor.setParameter(null, "message", "Hello World!");
var oResultDom = oProcessor.transformToDocument(oXmlDom);

Two other methods are related to parameters, getParameter() and removeParameter(), which are used to get the current value of a parameter and remove the parameter value, respectively. Each method takes the namespace URI (once again, typically null) and the local name of the parameter:

var oProcessor = new XSLTProcessor()
oProcessor.importStylesheet(oXslDom);
oProcessor.setParameter(null, "message", "Hello World! ");
alert(oProcessor.getParameter(null, "message"); //outputs "Hello World!"
oProcessor.removeParameter(null, "message");
var oResultDom = oProcessor.transformToDocument(oXmlDom);

These methods aren't used often and are provided mostly for convenience.

About the Author

Nicholas C. Zakas is the lead author of Professional Ajax by (Wrox, 2006, ISBN: 0-471-77778-1). This article is adapted from Chapter 15 "XML in JavaScript" of his first book Professional JavaScript for Web Developers (Wrox, 2005, ISBN: 0-7645-7908-8). He has worked in Web development for more than five years. He has helped develop Web solutions in use at some of the largest companies in the world.

Copyright © 2000-2006 by John Wiley & Sons, Inc. or related companies. All rights reserved. Reprinted with permission.






Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel