JavaScript: Konflikt von gleichnamigen Objekten bei mehreren ggbApplets auf derselben HTML-Seite
Situation:
Ich habe auf der selben HTML-Seite verschiedene eigene Geogebra-Applets eingebunden, in denen ich JavaScript für verschiedene Operationen nutze. Zum Beispiel werden beim Klicken auf eine Schaltfläche im Geogebra-Applet verschiedene Objekte per Zufallsgenerator neu initialisiert, Gleichungssysteme umgeformt, etc.
Problem:
Zuerst wunderte ich mich, dass die Schaltfläche aus dem zuerst eingebundenen Geogebra-Applet plötzlich nicht korrekt reagierte, bis ich feststellte, dass es offenbar auf die Objekte des als zweites eingebundenen Geogebra-Applets zugriff, die in beiden Applets die gleichen Namen hatten.
Beobachtung:
Ein Klick auf das jeweilige Geogebra-Reset-Icon sorgt dafür, dass die Objekte des zugehörigen Applets nun "bevorzugt" werden und das Applet wieder korrekt funktioniert, dafür aber die anderen Applets nicht mehr korrekt funktionieren.
Vermutung:
Vermutlich liegen die Objekte ALLER auf der HTML-Seite eingebundenen Geogebra-Applets im selben "namespace"(?), so dass das JavaScript in den verschiedenen Geogebra-Applets jeweils auf die Objekte der anderen Geogebra-Applets zugreifen kann. Bei gleichnamigen Objekten werden immer die Objekte des zuletzt aktivierten Geogebra-Applets bevorzugt.
Frage:
Natürlich wäre das Umbenennen der Objekte eine (sehr aufwändige) Möglichkeit, aber bevor ich damit anfange, wollte ich lieber mal nachfragen:
Gibt es eine Möglichkeit, mehrere Geogebra-Applets auf derselben HTML-Seite einzubinden, ohne dass diese sich trotz gleichnamiger Objekte gegenseitig in die Quere kommen?
Yes https://dev.geogebra.org/ex...
Vielen Dank für die Rückmeldung - dieses Beispiel war mir allerdings bereits bekannt.
Ich schreibe hier mal meine weiteren Erkenntnisse und meine Lösungsansätze, falls irgend jemand mal in die gleiche Situation kommt.
Ich habe inzwischen herausgefunden, was genau das Problem war. Ich dachte zunächst, die Geogebra-Objekte seien das Problem. Es sind aber nicht die Objekte, sondern die Funktionen im globalen JavaScript-Bereich. Wenn einem das bewusst ist, kann man das bereits im Vorfeld vermeiden, aber meine Situation war etwas kniffliger, da ich exakt das gleiche Geogebra-Applet mehrmals in der selben HTML-Seite einbinden wollte (ein Applet für Gauß-Umformungen), wobei ich jeweils ein paar Paramter von außen per Java-Skript verändert habe.
Wenn 2 Geogebra-Applets in der selben HTML-Seite eingebunden sind, dann überlagern sich die Funktionen, die im globalen JavaScript-Bereich liegen. Wenn in beiden Geogebra-Applets global definierte Funktionen mit dem selben Namen verwendet werden, dann kann nur die Funktion angesprochen werden, die im zuletzt eingefügten Geogebra-Applet liegt.
Ich habe dazu ein Beispiel im Anhang angefügt.
In beiden Applets (die beide die gleidchen Funktionsnamen verwenden) wird beim Klicken auf Schaltfläche C die global definierte Funktion showHide aufgerufen, welche die Meldung ausgeben soll, von welchem Applet aus die Schaltfläche angeklickt wurde. Hier sieht man allerdings, dass in beiden Applets die gleiche Meldung erscheint, was aber eigentlich nicht erwünscht ist. Das bedeutet, dass beide Applets nur auf die Funktion showHide aus dem 2. Applet zugreifen können. Erst durch ein Klicken auf das Reset-Symbol des ersten Geogebra-Applets wird dieses "in den Vordergrund" geholt, und jetzt ist nur noch die Funktion showHide aus dem ersten Geogebra-Applet ansprechbar.
Tatsächlich kann ich mir Situationen vorstellen, in denen man diesen Effekt sogar nutzen kann, um von einem Geogebra-Applet aus ein anderes zu beeinflussen.
Mein Lösungsansatz war dann, dass ich im globalen JavaScript-Bereich innerhalb einer Funktion (z.B mit dem Namen m) ein neues Objekt (z.B. mit dem Namen o) erezugt habe, das dann somit "static" ist, und auf das ich dann auch vom "privaten" Java-Script-Bereich aus zugreifen kann. Somit kann ich das ggbApplet-Object statisch in der globalen Funktion speichern. Am einfachsten sieht man das in meinem Beispiel (siehe Anhang).
Comments have been locked on this page!