XSLTProcessor.importStylesheet() — Methode · JavaScript-Referenz

Signatur

XSLTProcessor.prototype.importStylesheet(style)

Beschreibung

Mit importStylesheet() übergibst du einem XSLTProcessor das XSLT-Stylesheet, das er bei späteren Transformationen verwenden soll. Das Stylesheet muss bereits als DOM-Knoten vorliegen, also z. B. als Document, das mit DOMParser geparst oder per fetch() geladen und anschließend geparst wurde. Du kannst auch ein einzelnes xsl:stylesheet- bzw. xsl:transform-Element übergeben.

Erst nach dem Import funktionieren transformToFragment() und transformToDocument(). Typische Einsatzfälle sind das Rendern von XML-Daten (RSS-Feeds, Konfigurationsdateien, Altdaten aus SOAP-Diensten) direkt im Browser als HTML, ohne dass dafür ein Server nötig ist.

Der Prozessor merkt sich das Stylesheet intern. Ein weiterer Aufruf von importStylesheet() auf derselben Instanz ist erst möglich, nachdem du reset() aufgerufen hast. Parameter, die per setParameter() gesetzt wurden, bleiben unabhängig davon bestehen, bis clearParameters() oder reset() aufgerufen wird.

Parameter

Name	Typ	Default	Beschreibung
$style Pflicht	Node (Document \| Element)		Das zu importierende XSLT-Stylesheet als DOM-Knoten – entweder ein `Document` mit einem `xsl:stylesheet`-Wurzelelement oder direkt ein solches Element. Auch ein Literal Result Element-Stylesheet (vereinfachte Syntax) ist möglich.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Das Stylesheet wird intern im Prozessor gespeichert.

Beispiele

Stylesheet aus einem String importieren und XML in HTML umwandeln

const parser = new DOMParser();

const xml = parser.parseFromString(`
<buecher>
  <buch><titel>Faust</titel><autor>Goethe</autor></buch>
  <buch><titel>Die Räuber</titel><autor>Schiller</autor></buch>
</buecher>`, 'application/xml');

const xsl = parser.parseFromString(`
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  <xsl:template match="/">
    <ul>
      <xsl:for-each select="buecher/buch">
        <li><xsl:value-of select="titel"/> – <xsl:value-of select="autor"/></li>
      </xsl:for-each>
    </ul>
  </xsl:template>
</xsl:stylesheet>`, 'application/xml');

const processor = new XSLTProcessor();
processor.importStylesheet(xsl);

const fragment = processor.transformToFragment(xml, document);
document.body.append(fragment);
console.log(document.body.querySelectorAll('li').length);

2

Stylesheet und Daten per fetch laden

const loadXml = async (url) => {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status} für ${url}`);
  const text = await res.text();
  const doc = new DOMParser().parseFromString(text, 'application/xml');
  if (doc.querySelector('parsererror')) {
    throw new Error(`Ungültiges XML: ${url}`);
  }
  return doc;
};

const renderFeed = async () => {
  const [xsl, feed] = await Promise.all([
    loadXml('/xsl/feed.xsl'),
    loadXml('/feed.xml')
  ]);

  const processor = new XSLTProcessor();
  processor.importStylesheet(xsl);
  document.querySelector('#feed').replaceChildren(
    processor.transformToFragment(feed, document)
  );
};

renderFeed().catch(console.error);

Stylesheet wechseln mit reset() und Parameter nutzen

const parser = new DOMParser();
const xml = parser.parseFromString('<gruss>Welt</gruss>', 'application/xml');

const makeXsl = (prefix) => parser.parseFromString(`
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="text"/>
  <xsl:param name="name" select="'Gast'"/>
  <xsl:template match="/">${prefix} <xsl:value-of select="gruss"/>, <xsl:value-of select="$name"/>!</xsl:template>
</xsl:stylesheet>`, 'application/xml');

const processor = new XSLTProcessor();
processor.importStylesheet(makeXsl('Hallo'));
processor.setParameter(null, 'name', 'Anna');
console.log(processor.transformToDocument(xml).documentElement.textContent);

// Vor erneutem Import zurücksetzen (entfernt auch Parameter)
processor.reset();
processor.importStylesheet(makeXsl('Servus'));
console.log(processor.transformToDocument(xml).documentElement.textContent);

Hallo Welt, Anna! Servus Welt, Gast!

// Wichtig · Fallstricke

Nur DOM-Knoten: Ein String oder eine URL wird nicht akzeptiert. Parse das Stylesheet vorher mit DOMParser (MIME-Typ application/xml oder text/xml, nicht text/html).
Parse-Fehler prüfen: DOMParser wirft bei ungültigem XML keine Ausnahme, sondern liefert ein Dokument mit <parsererror>. Wird so ein Dokument importiert, schlägt die Transformation später fehl oder liefert null.
Mehrfacher Import: Vor einem neuen Stylesheet auf derselben Instanz immer reset() aufrufen. Alternativ legst du einfach eine neue XSLTProcessor-Instanz an.
Nur XSLT 1.0: Browser unterstützen ausschließlich XSLT 1.0 (plus teilweise EXSLT). Funktionen aus XSLT 2.0/3.0 werden nicht unterstützt.
xsl:import/xsl:include: Diese Anweisungen werden relativ zur Dokument-URL aufgelöst und unterliegen der Same-Origin-Policy. Bei Dokumenten aus DOMParser klappt das oft nicht zuverlässig.
Sicherheit: Das Ergebnis einer Transformation wird ins DOM eingefügt. Stammen Stylesheet oder Daten aus nicht vertrauenswürdigen Quellen, drohen XSS-Lücken, etwa durch disable-output-escaping oder erzeugte <script>- und Event-Attribute. Verwende deshalb nur vertrauenswürdige Stylesheets.
Kompatibilität: Die Methode ist in allen gängigen Browsern verfügbar, in Node.js und Web Workern jedoch nicht. Die Browser-Hersteller (unter anderem Chrome) haben angekündigt, XSLT im Browser langfristig zu entfernen. Für neue Projekte solltest du daher eine JavaScript-Bibliothek oder eine serverseitige Transformation in Betracht ziehen.

Siehe auch

XSLTProcessor XSLTProcessor.transformToFragment() XSLTProcessor.transformToDocument() XSLTProcessor.setParameter() XSLTProcessor.reset() DOMParser