XSLT - Côté client

Si votre navigateur prend en charge XSLT, il peut être utilisé dans le navigateur pour convertir des documents en XHTML.

Solution JavaScript

Dans les chapitres précédents, nous avons expliqué comment utiliser XSLT pour convertir un document XML en XHTML. Nous y sommes parvenus en ajoutant une feuille de style XSL au fichier XML et en effectuant la conversion via le navigateur.

Même si cette méthode fonctionne bien, inclure une référence à une feuille de style dans le fichier XML n'est pas toujours satisfaisant (par exemple, cette méthode ne fonctionnera pas dans les navigateurs qui ne reconnaissent pas XSLT).

Une approche plus polyvalente consiste à utiliser JavaScript pour effectuer la conversion.

En utilisant JavaScript, nous pouvons :

Effectuer des tests de détection de navigateur
Utiliser différentes feuilles de style en fonction du navigateur et des besoins de l'utilisateur

C'est la beauté de XSLT ! L'un des objectifs de conception de XSLT était de permettre de transformer des données d'un format à un autre, tout en prenant en charge différents types de navigateurs et différents besoins des utilisateurs.

La transformation XSLT côté client est appelée à devenir l'une des principales tâches effectuées par les navigateurs à l'avenir, et nous assisterons également à sa croissance sur des marchés spécifiques de navigateurs (Braille, navigateurs vocaux, imprimantes web, appareils portables, etc.).

Fichiers XML et fichiers XSL

Regardez le document XML déjà présenté dans un chapitre précédent :

Exemples

<?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>

Voir le fichier XML。

Et la feuille de style XSL d'accompagnement :

Exemples

<?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>Ma collection de CD</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th style="text-align:left">Titre</th>
<th style="text-align:left">Artiste</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>

Voir le fichier XSL。

Notez que ce fichier XML ne contient pas de référence au fichier XSL.

Important :L'affirmation ci-dessus signifie que le fichier XML peut être transformé à l'aide de plusieurs feuilles de style XSL différentes.

Remarque : assurez-vous que le fichier XSL peut être ouvert correctement dans le navigateur via le lien, comme indiqué ci-dessous :

Sinon, des erreurs peuvent survenirUncaught TypeError: Failed to execute 'importStylesheet' on 'XSLTProcessor': parameter 1 is not of type 'Node'.。

Convertir XML en XHTML dans le navigateur

Voici le code source utilisé pour convertir le fichier XML en XHTML côté client :

Exemples

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

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

Essayez-le vous-même »

Astuce :Si vous ne savez pas comment écrire du JavaScript, veuillez étudier notreTutoriel JavaScript。

Explication de l'exemple :

La fonction loadXMLDoc()

La fonction loadXMLDoc() est utilisée pour charger les fichiers XML et XSL.

Elle vérifie le type de navigateur de l'utilisateur et charge le fichier.

La fonction displayResult()

Cette fonction est utilisée pour afficher le fichier XML mis en forme par le fichier XSL.

Charger les fichiers XML et XSL
Tester le type de navigateur de l'utilisateur
Si le navigateur de l'utilisateur prend en charge les objets ActiveX :
- Utilisez la méthode transformNode() pour appliquer la feuille de style XSL au document XML
- Définissez le corps du document actuel (id="example") pour qu'il contienne le document XML avec la feuille de style appliquée
Si le navigateur de l'utilisateur ne prend pas en charge les objets ActiveX :
- Créez un nouvel objet XSLTProcessor et importez le fichier XSL
- Utilisez la méthode transformToFragment() pour appliquer la feuille de style XSL au document XML
- Définissez le corps du document actuel (id="example") pour qu'il contienne le document XML avec la feuille de style appliquée

Autres extensions