xsl <> javascript variablen übergeben
vki
- xsl
Guten Tag
Ich habe eine XML-Datei mit Polarkoordinaten (Winkel und Distanz). Die Winkel sind in gon angegebenin (Umrechnung in Radian 1 gon = 2 PI rad / 400). Ich möchte aus diesen Angaben x/y-Koordinaten berechnen und später im SVG etwas darstellen.
Das Ganze soll innerhalb eines XSL-Stylesheets geschehen.
XSL kennt ja keine trigonometrische Funktionen, weshalb ich die Umrechnung mit JavaScript machen muss. Wie kann ich jetzt aber aus dem XSL meine Winkel und Distanz-Variable an JavaScript übergeben, und nachher die x/y-Koordinaten wieder zurückgeben?
Ich habe mal eine JavaScript Funktion erstellt, die das gewünschte Resultat liefert. Dann hab ich versucht, die ins XSL einzubauen. Ich habe das mit einem Named Template versucht, um die Variablen als Parameter ins JS zu übergeben. Wie aber bekomme ich die Variablen aus dem JS ins XSL und dann aus dem Berechnungs-Template, sodass ich sie später im SVG verwenden kann?
Angehängt meine JS Funktion und mein Template.
Vielen Dank für eure Hilfe!
<html>
<head>
<script type="text/javascript">
var azi=99;
var dist=11.97;
function JSCalcCoord(azi,dist)
{
var x,y;
var radians;
var cos, sin;
radians = (azi * 400) / (2 * Math.PI);
cos = Math.cos(radians);
sin = Math.sin(radians);
x = dist * cos;
y = dist * sin;
// Neues Objekt
return {x:x,y:y};
}
</script>
</head>
<body>
<script type="text/javascript">
Koord=JSCalcCoord(azi,dist);
document.write('x-Koord: '+Koord.x+' y-Koord: '+Koord.y );
</script>
</body>
</html>
-----------------------------------------------
<xsl:template name="JSCalcCoord">
<xsl:param name="azi"/>
<xsl:param name="dist"/>
<SCRIPT language="JavaScript">
var radians = (<xsl:value-of select="$azi"/> \* 400) / (2 \* Math.PI)";
var cos = Math.cos(radians);
var sin = Math.sin(radians);
var x\_koord = $dist \* $cos
var y\_koord = $dist \* $sin
return {x:x,y:y}; // ???
</SCRIPT>
</xsl:template>
@@vki:
nuqneH
XSL kennt ja keine trigonometrische Funktionen, weshalb ich die Umrechnung mit JavaScript machen muss.
Nein. Schlag nach bei Meinike: Einfach funktional: Verwendung benutzerdefinierter Funktionen in XSLT-2.0-Stylesheets (PDF) (gefunden über http://www.google.de/search?q=xpath+sinus)
Qapla'
@@vki:
nuqneH
XSL kennt ja keine trigonometrische Funktionen, weshalb ich die Umrechnung mit JavaScript machen muss.
Nein. Schlag nach bei Meinike: Einfach funktional: Verwendung benutzerdefinierter Funktionen in XSLT-2.0-Stylesheets (PDF) (gefunden über http://www.google.de/search?q=xpath+sinus)
Qapla'
Danke für den Tip. Aber ich möchte wenn möglich XSLT-2.0 nicht einsetzen, da das ohne Zusatzinstallation von einem Prozessor im Browser nicht anzeigbar ist und eine Fehlermeldung kommt, wenn man Funktionen einsetzt.
XSL und Javascript, das müsste schon gehen, bloss wie übergebe ich meine Parameter?
...
Hallo vki,
Aber ich möchte wenn möglich XSLT-2.0 nicht einsetzen, da das ohne Zusatzinstallation von einem Prozessor im Browser nicht anzeigbar ist und eine Fehlermeldung kommt, wenn man Funktionen einsetzt.
Schreibe die Reihenentwicklungen mit XSLT-1.0-Techniken um, nutze also <xsl:template name="sin">...</xsl:template>
usw.
Versuche ansonsten nicht JavaScript in XSLT auszurufen, sondern übergib im via XSLT erzeugten HTML-Code Parameter an die JavaScript-Funktion.
Grüße,
Thomas
Hallo Thomas
Danke für das Beispiel. So ganz ist mir aber noch nicht klar, wie ich das auf meinem Fall umbauen kann. Drum hier mal ein rein theoretischer Ablauf:
Das Element mit den Polarkoordinaten ist weit unten in meinem DOM-Baum, und an einer bestimmten Stelle in meinem XSL lese dieses Element und schreibe Werte aus Child-Nodes von diesem Element in eine Tabelle. Die Elemente haben als Attribut eine Nummer.
Es müsste jetzt möglich sein, in meiner JavaScript-Funktion mit „getElementsByName() + Nummer-Attribut“ auf die gesuchten Werte zuzugreifen und die Koordinatenberechnungen durchzuführen.
Du startest deine Funktion beim Laden des Dokumentes, aber ich könnte das ja auch aus einem Template machen, oder? In beiden Fällen habe ich jetzt aber das Problem, dass ich die Werte zwischenspeichern muss, um später im SVG-Abschnitt (ist auch Teil vom xsl-file) die Daten in Abhängigkeit von anderen Werten der Child-Nodes dieser Elemente darzustellen. Kann ich das machen, indem ich neue Elemente+Attribute erstelle, und dann später wieder darauf zugreife?
Andere Frage: Es gibt offensichtlich ein eval-tag, und in einem älteren Forumsbeitrag hast du geschrieben, dass:
xsl:eval führt eine via xsl:script definierte Funktion aus.
Da müsste man ja die JS-Funktion so aufrufen können. Dieses Tag kennt er aber nicht. Ist das auch Teil von xlst 2.0 oder gibt’s das nicht mehr?
Die Lösung mit der Reihenentwicklung muss ich noch studieren…
Danke und Gruss
vki
Hallo vki,
Es müsste jetzt möglich sein, in meiner JavaScript-Funktion mit „getElementsByName() + Nummer-Attribut“ auf die gesuchten Werte zuzugreifen und die Koordinatenberechnungen durchzuführen.
Vielleicht die Werte via XSLT in ein JS-Array schreiben und dann damit alle weiteren Operationen ausführen.
Du startest deine Funktion beim Laden des Dokumentes, aber ich könnte das ja auch aus einem Template machen, oder?
Die Funktion wird nach der XSLT-Verarbeitung im generierten HTML aufgerufen. Das könnte auch jeder sonstige Event-Handler sein.
Andere Frage: Es gibt offensichtlich ein eval-tag, und in einem älteren Forumsbeitrag hast du geschrieben, dass:
xsl:eval führt eine via xsl:script definierte Funktion aus.
Das ist uralter Kram aus dem MS-Universum, könnte ggf. im IE noch funktionieren.
Anderer Ansatz: Lade die XML-Daten doch via AJAX (XMLHttpRequest) und führe dann auf dem Ergebnisbaum die JS-Aktionen für den SVG-Code aus. Dann geht es ganz ohne XSLT.
Grüße,
Thomas
Hallo vki,
XSL und Javascript, das müsste schon gehen, bloss wie übergebe ich meine Parameter?
Ein Beispiel zu XSLT + JS:
test.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="test.xsl" type="text/xsl"?>
<test>1</test>
test.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" cdata-section-elements="script"/>
<xsl:template match="/">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function myfkt(x)
{
var s = Math.sin(x);
document.getElementById("out").firstChild.nodeValue = s;
}
</script>
</head>
<body onload="myfkt({test})">
<p id="out">...</p>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Ergebnis (im Absatz): 0.8414709848078965
Grüße,
Thomas