XSLT - En el cliente

Si su navegador admite XSLT, este puede utilizarse en el navegador para convertir documentos a XHTML.

Solución JavaScript

En capítulos anteriores, le hemos mostrado cómo usar XSLT para convertir un documento XML a XHTML. Lo logramos de la siguiente manera: agregando una hoja de estilo XSL al archivo XML y realizando la conversión a través del navegador.

Aunque este método funciona bien, incluir una referencia a la hoja de estilo en el archivo XML no siempre es satisfactorio (por ejemplo, en navegadores que no reconocen XSLT, este método no funciona).

Un método más general es usar JavaScript para realizar la conversión.

Usando JavaScript, podemos:

Realizar pruebas de detección del navegador
Usar diferentes hojas de estilo según el navegador y las necesidades del usuario

¡Esa es la belleza de XSLT! Uno de los propósitos del diseño de XSLT es hacer posible convertir datos de un formato a otro, mientras se admite diferentes tipos de navegadores y diferentes necesidades de los usuarios.

La conversión XSLT en el cliente seguramente se convertirá en una de las tareas principales que ejecutarán los navegadores en el futuro, y también veremos su crecimiento en mercados de navegadores específicos (braille, navegadores auditivos, impresoras de red, dispositivos de mano, etc.).

Archivos XML y archivos XSL

Mire este documento XML que ya se mostró en capítulos anteriores:

Ejemplo

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>

Ver archivo XML。

Y la hoja de estilo XSL adjunta:

Ejemplo

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th style="text-align:left">Title</th>
<th style="text-align:left">Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Ver archivo XSL。

Tenga en cuenta que este archivo XML no contiene una referencia al archivo XSL.

Importante:Lo anterior significa que el archivo XML puede convertirse utilizando múltiples hojas de estilo XSL diferentes.

Nota: asegúrese de que el archivo XSL se pueda abrir correctamente en el navegador a través del enlace, como se muestra a continuación:

De lo contrario, pueden producirse errores.Uncaught TypeError: Failed to execute 'importStylesheet' on 'XSLTProcessor': parameter 1 is not of type 'Node'.。

Convertir XML a XHTML en el navegador

Este es el código fuente para convertir un archivo XML a XHTML en el cliente:

Ejemplo

<!DOCTYPE html> <html> <head> <script>

</script> </head> <body onload="displayResult()"> <div id="example" /> </body> </html>

Pruébalo »

Sugerencia:Si no sabe cómo escribir JavaScript, estudie nuestroTutorial de JavaScript。

Explicación del ejemplo:

La función loadXMLDoc()

La función loadXMLDoc() se utiliza para cargar archivos XML y XSL.

Comprueba el tipo de navegador del usuario y carga el archivo.

La función displayResult()

Esta función se utiliza para mostrar el archivo XML con el estilo definido por el archivo XSL.

Cargar archivos XML y XSL
Probar el tipo de navegador del usuario
Si el navegador del usuario admite objetos ActiveX:
- Aplicar la hoja de estilo XSL al documento XML usando el método transformNode()
- Establecer el body del documento actual (id="example") para que contenga el documento XML con el estilo aplicado
Si el navegador del usuario no admite objetos ActiveX:
- Crear un nuevo objeto XSLTProcessor e importar el archivo XSL
- Aplicar la hoja de estilo XSL al documento XML usando el método transformToFragment()
- Establecer el body del documento actual (id="example") para que contenga el documento XML con el estilo aplicado

Otras extensiones