Wie kann ich eine Variable von einem eingebetteten SVG-Dokument an das HTML-Dokument senden?

Question

Ich habe ein SVG in ein HTML-Dokument eingebettet, indem ich diesen Code verwendet habe

In der SVG-Datei habe ich einen Skriptblock wie diesen erhalten

    function myFunction() {
        var sum;
        sum = 5 + 3;
    }

Wie kann ich die Variable 'sum' aus dem SVG im HTML-Dokument erhalten? (Hinweis: Das Skripting im SVG ist viel komplexer als eine einfache Summe, aber ich wollte diese Frage nicht mit Code überladen)

Answer 1

Die Antwort lautet, dass Sie genauso vorgehen würden, als wäre das ein und das darin enthaltene Dokument ein HTML-Dokument.</p> <p>Sie können Daten z.B. über <a href="https://developer.mozilla.org/de/DOM/window.postMessage" rel="nofollow">postMessage</a> übergeben oder globale Variablen oder Funktionen im entsprechenden Fensterobjekt verwenden.</p> <p>im SVG:</p> <pre><code>function foo() { var parentWindow = window.parent; parentWindow.someGlobalVar = 47; } </code></pre> <p>Dann können Sie die Variable <code>someGlobalVar</code> im Haupt-Html-Dokument lesen. Sie können auch Funktionen aufrufen, wie in <a href="http://xn--dahlstrm-t4a.net/svg/html/from-svg-to-parent-html-script.html" rel="nofollow">diesem Beispiel</a>.</p></x-turndown>

Answer 2

Es gibt einen Workaround. Ich weiß nicht, wie alt diese Frage war, aber jemand wird sie nutzen.

---

In der SVG-Datei.

    function myFunction() {
        var sum;
        sum = 5 + 3;
    }
    if(window.parent.svgLoaded) window.parent.svgLoaded(this);

---

In der eingebetteten HTML-Datei.

    var svgScript;
    function svgLoaded(script){
        alert("gefangen!")
        svgScript = script;
    }
    function onPlayPause(){
        svgScript.myFunction();
    }

Es funktioniert.

Answer 3

Ich glaube nicht, dass Sie JavaScript-Funktionen in SVG definieren und sie aufrufen können (zumindest extern). Sie können jedoch wahrscheinlich erreichen, was Sie wollen, indem Sie die Funktion in der HTML-Datei anstatt in der SVG definieren. Wenn Sie beispielsweise alle Rechtecke in einem bestimmten SVG zählen möchten, können Sie den folgenden Code verwenden:

  function countRectangles()
    {
      var svg = document.getElementById("mySVG").getSVGDocument();
      var allRectangles = svg.getElementsByTagName("rect");

      var result = allRectangles.length
      alert(result);
      return result;
    }