kostenloser Webspace werbefrei: lima-city

Funktionen der Seite in externer SVG-Datei nutzen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   na-web

   na-web hat kostenlosen Webspace.

   18:32, 12.9.2018

   Geschätzte Community
   Wieder einmal habe ich ein tag/problem">Problem und keine Ahnung wie ich es lösen kann. Ich möchte ganz einfach eine bisher inline eingebundene SVG-Datei auslagern, was an sich kein Problem darstellen würde. Dabei gibt es nun aber das Problem, dass bisher Funktionen verwendet wurden (Javascript), die in anderen externen Dateien definiert sind. Nun musste ich aber feststellen, dass die durch <object> eingebundene SVG-Datei mit JS nicht auf die Funktionen zugreifen kann, die in der Hauptseite nutzbar sind (eingebunden durch <script src="..."></script>). Ich könnte die Funktionen zwar noch einmal in der SVG-Seite definieren, dann müssten Sie aber mit jedem laden der Seite zwansläufig doppelt geladen werden, was meines Erachtens nach keinen Sinn macht. Kenn jemand eine Möglichkeit das Problem zu umgehen?
   
   Danke im Voraus und noch einen schönen Tag

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. mein-wunschname

   mein-wunschname hat kostenlosen Webspace.

   22:44, 12.9.2018

   Wenn du der externen SVG eine ID verpasst, also etwa
   

   <object data="test.svg" type="image/svg+xml" id="testsvg" width="100%" height="100%"></object>

   
   dann kannst du doch nach
   

   var a = document.getElementById("testsvg");

   
   auf die DOM-Struktur der SVG zugreifen.
   Das ist auch der Ansatz, der hier
   https://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript
   beschrieben wird.

4. fuerderer

   fuerderer hat kostenlosen Webspace.

   9:36, 13.9.2018

   Ich hoffe, ich habe die Beschreibung richtig verstanden. So auf Anhieb kann ich aber nur spekulieren.
   Vielleicht liegt es an der Ausführungsreihenfolge, vielleicht blockiert der Browser etwas aus Sicherheitsgründen. Das müsste man dann herausfinden.
   
   Könntest du einen Link zur Seite senden, wo man sich das Problem anschauen kann?
5. Autor dieses Themas

   na-web

   na-web hat kostenlosen Webspace.

   12:42, 13.9.2018

   Sorry, ich hab das wohl falsch erklärt. Ich werde unten den Aufbau der Seite (anhand eines Beispiels) kurz genauer erläutern und hoffe, ihr könnt mir dann helfen.
   
   

   <script src="functions.min.js"></script><object id="map" data="map.svg" type="image/svg+xml"></object>

   
   
   functions.min.js:
   

   function example() {
   alert('Es hat geklappt');
   }

   
   
   map.svg (Ausschnitt nach dem eigentlichen Bild):
   

   <script>example();</script>

   
   Vorher war noch die Rede der DOM-Struktur, die ist zwar nicht gefragt, aber ich würde trotzdem gerne fragen, wie ich denn von aussen auf die Struktur zugreifen würde, was eine Alternative wäre. Der direkte Zugriff per document.getElementById() gibt lediglich "null" zurück. Wie müsste ich das denn lösen?

6. fuerderer

   fuerderer hat kostenlosen Webspace.

   13:17, 13.9.2018

   Der Javascript-Code der SVG Grafik ist hier tatsächlich auf ein separates window-Objekt beschränkt, das wusste ich zuvor noch nicht.
   
   Ich hab jetzt eine mögliche Lösung erarbeitet.
   
   function.min.js:
   

   function example() {
   alert('Es hat geklappt');
   }
   document.addEventListener("DOMContentLoaded", function() {
     // Erstelle von außen explizit ein parent-Attribut, um danach von innen nach außen zugreifen zu können.
     document.getElementById("map").contentWindow.parent = window;
   });

   
   
   Skriptcode in der map.svg:
   

   document.addEventListener("DOMContentLoaded", function() {
     // Zugriff über das vorher erstelle parent-Attribut nach außen
     parent.example();
   });

   Das Konstrukt mit

   document.addEventListener

   kann hier entfallen, wenn du die Funktion example nicht sofort, sondern z.B. bei einem Klick ausführen möchtest.
   
   Allerdings habe ich es nur in Firefox 62.0 getestet. Du solltest einmal durchprobieren, ob auch andere Browser diese Lösung unterstützen.

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?