Metadata Stylesheets for the Web

Techniques for using XSLT to transform XML into HTML


Example 4 - Use JavaScript to process all XSLT stylesheets in one page

Similar to example 3, this example demonstrates using JavaScript to combine the XML document and XSLT stylesheet in an XSLT-aware browser. However, the HTML page has a slightly different design than example 3. It includes "FGDC Classic", "FGDC FAQ", "FGDC Plus" links along the top for loading different stylesheets. And an "XML" link is included for displaying the metadata XML document in the browser. Everything is done in one HTML page named metadata.htm. You launch metadata.htm to initially display the metadata with any one of the stylesheets by constructing the query string that specifies the metadata XML document and stylesheet to use. Once the page loads, you can use the links to display the the same metadata XML document differently. Example 4 uses the same XSLT stylesheets as example 3 - FGDC_Classic_for_Web_body.xsl, FGDC_FAQ_for_Web_body.xsl, and FGDC_Plus_body.xsl. Metadata.htm includes all required JavaScript and Cascading stylesheet information. As part of the window.onload function, JavaScript creates the XML and XSLT document objects, transforms the XML into HTML, and places the results of this transformation in a <div> element for display.

To start, construct a URL to metadata.htm and include the XML document and XSLT stylesheet filenames you want to process as xmlfile=xml/<metadata> and xslfile=xsl/<stylesheet> query string variables, as shown below. These XML documents and XSLT stylesheets should be located in or below the same directory as metadata.htm on the web server. Otherwise, you might encounter security issues if they're located on another Web server, for example.

FGDC Classic
metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_Classic_for_Web_body.xsl
FGDC FAQ
metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_FAQ_for_Web_body.xsl
FGDC Plus
metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_Plus_body.xsl

A. Display metadata in current page:

Below demonstrates how to display metadata in the current Web page.

Data Metadata
State Boundaries of the United States FGDC Classic FGDC FAQ FGDC Plus
<table border="1" cellpadding="2" cellspacing="2">
  <tr>
    <th>Data</th>
    <th colspan="3">Metadata</th>
  </tr>
  <tr>
    <td>State Boundaries of the United States</td>
      <td><a href="metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_Classic_for_Web_body.xsl">FGDC Classic</a></td>
      <td><a href="metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_FAQ_for_Web_body.xsl">FGDC FAQ</a></td>
      <td><a href="metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_Plus_body.xsl">FGDC Plus</a></td>
  </tr>
</table>

B. Display metadata in separate target window:

Below demonstrates how to display metadata in a different (target) window named "metadata".

Data Metadata
State Boundaries of the United States FGDC Classic FGDC FAQ FGDC Plus
<table border="1" cellpadding="2" cellspacing="2">
  <tr>
    <th>Data</th>
    <th colspan="3">Metadata</th>
  </tr>
  <tr>
    <td>State Boundaries of the United States</td>
      <td><a href="metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_Classic_for_Web_body.xsl" target="metadata">FGDC Classic</a></td>
      <td><a href="metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_FAQ_for_Web_body.xsl" target="metadata">FGDC FAQ</a></td>
      <td><a href="metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_Plus_body.xsl" target="metadata">FGDC Plus</a></td>
  </tr>
</table>

C. Display metadata in popup window:

Below demonstrates how to display metadata in a popup window opened by a JavaScript function named openPopup(). This option allows you to specify the size and position of the window and whether to expose the window's menubar and location input for entering URLs directly into the browser afterwards, for example. See the popup.js for details.

Data Metadata
State Boundaries of the United States FGDC Classic FGDC FAQ FGDC Plus
<table border="1" cellpadding="2" cellspacing="2">
  <tr>
    <th>Data</th>
    <th colspan="3">Metadata</th>
  </tr>
  <tr>
    <td>State Boundaries of the United States</td>
     <td><a href="JavaScript:openPopup('metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_Classic_for_Web_body.xsl')">FGDC Classic</a></td>
     <td><a href="JavaScript:openPopup('metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_FAQ_for_Web_body.xsl')">FGDC FAQ</a></td>
     <td><a href="JavaScript:openPopup('metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_Plus_body.xsl')">FGDC Plus</a></td>
  </tr>
</table>