Languages JavaScript JavaScript XSLT Support in Firefox

JavaScript XSLT Support in Firefox

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.

Latest Posts

Related Stories