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.
metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_Classic_for_Web_body.xsl
metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_FAQ_for_Web_body.xsl
metadata.htm?xmlfile=xml/statesp020.xml,xslfile=xsl/FGDC_Plus_body.xsl
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>
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>
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>