How do I parse a string of XUL?

Sometimes you may have a string of XUL, either entered by the user or sent from a remote host that you wish to parse into XUL and display. In this case, you can't use DOM insertion methods as you need to parse XUL content.

There are several possibilities. First, if the XUL to parse contains an entire document, you can simply load it into an iframe element. You can hide the iframe and use DOM functions to grab pieces of the XUL document.

Another method which might be better for short fragments of XUL is to use the DOMParser object to parse the XUL string:

var xulString="<button label='Hello'
var parser=new DOMParser();
var resultDoc=parser.parseFromString(xulString,"text/xml");

The DOMParser object parses a string into a document, however you can also use it to parse any string into a fragment as above.

You need to ensure that you declare the elements with the correct namespace, otherwise the elements will just be treated as XML elements. Since documents can only contain one top-level node, if you wish to parse several elements, you will need to wrap them in a single element such as a box. You can then use DOM functions to extract just the pieces you need. When working with the parsed document, you can grab the top-level node using the documentElement property of the document.

Here is an example which allows one the enter some random XUL content and it will be parsed and displayed:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="xulParser" title="XUL Parser" align="start"
function parseXUL()
  // get the contents of the textbox
  var xulData=document.getElementById("xulData").value;
  // check to see whether content was already added from a previous
  // time. In this case we delete the existing content before adding
  // more.
  var existBox=document.getElementById("dataBox");
  if (existBox) existBox.parentNode.removeChild(existBox);
  // wrap the content in a box. This is necessary in case the user
  // enters multiple top-level nodes. Also, we declare the XUL namespace
  // so that the user doesn't have to type it in themselves.
  xulData="<box id='dataBox' " +
          "xmlns=''>" +
          xulData + "</box>";
  // create a new DOMParser object and parse the content. The
  // parseFromString function takes two arguments, the string to
  // parse and the content type. Currently Mozilla only supports
  // parsing HTML and XML using the DOMParser, so features that
  // require a XUL document, such as templates or overlays, won't
  // work using this method.
  var parser=new DOMParser();
  var resultDoc=parser.parseFromString(xulData,"text/xml");
  // if the top-level node of the parsed document turns out
  // to be 'parsererror' that means that the XML was not
  // well-formed.
  if (resultDoc.documentElement.tagName == "parsererror")
    alert("Parsing Error");
  // if no error occurred, grab the documentElement property of
  // the parsed document and append it to this XUL window. The
  // content should appear at the bottom of the window.
  else document.documentElement.appendChild(resultDoc.documentElement);
<label value="Enter some XUL:"/>
<textbox id="xulData" multiline="true" rows="10" cols="60"/>
<button label="Parse" oncommand="parseXUL();"/>

Note that using DOMParser just uses the generic XML parser and does not handle templates or overlays and a number of other things. If you need to handle those features, you need to use an iframe.

Copyright © 1999 - 2005