Starky: Zugriff auf Parent bei Verwendung von SVG im IFRAME

Hallo,

ich stehe for folgendem Problem:

Nach langer Tests habe ich herausgefunden, dass es besser
ist den IFRAME-Tag zu verwenden, um ein SVG einzubetten.
Nun habe ich im SVG einen Link definiert
und möchte mit
javascript:parent.location.document.merkmalForm

eine Form aufrufen.
Es kommt zugriff verweigert.

Wie kann ich die HTML Seite ansprechen?

Wäre für einen Tip äußerst dankbar!

  1. Hallo,

    ich stehe for folgendem Problem:

    Nach langer Tests habe ich herausgefunden, dass es besser
    ist den IFRAME-Tag zu verwenden, um ein SVG einzubetten.
    Nun habe ich im SVG einen Link definiert
    und möchte mit
    javascript:parent.location.document.merkmalForm

    eine Form aufrufen.
    Es kommt zugriff verweigert.
    Wie kann ich die HTML Seite ansprechen?

    http://forum.de.selfhtml.org/archiv/2005/6/t109082/#m680828

    Grüße
    Thomas

  2. Hallo,

    Nun habe ich im SVG einen Link definiert
    und möchte mit
    javascript:parent.location.document.merkmalForm

    eine Form aufrufen.
    Es kommt zugriff verweigert.

    Wie kann ich die HTML Seite ansprechen?

    Im von Thomas genannten Posting habe ich aus einem HTML-Dokument auf ein SVG-Dokument zugegriffen. Hier soll es offenbar umgekehrt passieren und das ist auch etwas einfacher loesbar.

    Probiere mal diesen Test: Bim Anklicken des (zunaechst roten Kreises) wird der Farbwert aus den input-Feld uebernommen. Das funktioniert bei mir mit IE + ASV sowie nativ mit Firfox 1.5 und mit der Opera 9.0 Preview-Version (unter XP SP2). Opera 8.5 muss passen, da nur nur SVG-Tiny unterstuetzt wird und darin kein Scripting vorgesehen ist. Opera 9.0 geht da bereits weiter und soll mehr SVG-Basic implementieren.

    test.html:

      
    <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
    <head>  
    <title>Test by TM 01/06</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  
    </head>  
    <body>  
    <iframe src="test.svg" name="svgdoc" width="100" height="100" frameborder="0"></iframe>  
    <form action="">  
    <input type="text" value="#00F" />  
    </form>  
    </body>  
    </html>
    

    test.svg:

      
    <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>  
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  
    <circle cx="50" cy="50" r="30" fill="#F00"  
      onclick="evt.target.setAttribute('fill',top.document.forms[0].elements[0].value)"/>  
    </svg>
    

    Hinweis: Wenn ein Link verwendet wird, dann beachte zugunsten von Firefox 1.5 die Anordnung des onclick-Attributes (nicht beim a-Element, sondern beim text-Element unterbringen):

      
    <a xlink:href="...">  
      <text x="..." y="..." onclick="...">Linktext</text>  
    </a>
    

    MfG, Thomas

    1. Hallo Thomas

      Vielen Dank für den Hinweis, der Test hat funktioniert!
      Im Moment funktioniert unser Link so (mit embedd Tag)!
      Jetzt muss ich nur noch deinen Hinweis auf dieses Beispiel
      richtig übertragen, was gar nicht so einfach ist.
      Wenn du es nochmal anschauen möchtest ansonsten Danke!

      <a xlink:href="javascript:window.location.document.merkmalForm.fertigungsMaschine.value="AFO180/3/006";window.location.document.merkmalForm.merkmal.value="410D_FV";window.top.document.merkmalForm.submit()"

      <circle style="fill:rgb(0,0,255);stroke:rgb(255,255,0);stroke-width:1"
      cx="81.6667" cy="123.186" r="2"
      onmouseover="TestToolTipOBJ.ToolTipShow("Der Mittelwert beträgt[]-0.0116",evt);"
           onmouseout="TestToolTipOBJ.ToolTipHide(evt);"/>
         </a>

      Gruß Starky

      1. Hallo,

        Im Moment funktioniert unser Link so (mit embedd Tag)!
        Jetzt muss ich nur noch deinen Hinweis auf dieses Beispiel
        richtig übertragen, was gar nicht so einfach ist.
        Wenn du es nochmal anschauen möchtest ansonsten Danke!

        <a xlink:href="javascript:window.location.document.merkmalForm.fertigungsMaschine.value="AFO180/3/006";window.location.document.merkmalForm.merkmal.value="410D_FV";window.top.document.merkmalForm.submit()"

        1. Nimm "javascript:..." heraus und verlagere den Scriptaufruf zu einem onclick-Eventhandler.

        2. Verwende ggf. die genannte top-Referenzierung [top.document.formularname.feldname.value='...'] und vermeide moeglichst embed. Die scriptfreundlichste und browseruebergreifendste Einbindung von SVG in HTML ermoeglicht nach wie vor das iframe-Element (gegenueber embed zudem noch valide bis XHTML 1.0 Transitional). Das object-Element ist zwar zur reinen SVG-Einbindung passabel einsetzbar, taugt aber leider beim Scripting nicht viel.

        3. Innerhalb von doppelten Anfuehrungszeichen die einfachen verwenden oder die doppelten maskieren: "...'...'..." bzw. "..."..."...". Ggf. die doppelten und einfachen passend kombinieren: onclick='alert(""bla"")' oder aehnlich.

        <circle style="fill:rgb(0,0,255);stroke:rgb(255,255,0);stroke-width:1"
        cx="81.6667" cy="123.186" r="2"
        onmouseover="TestToolTipOBJ.ToolTipShow("Der Mittelwert beträgt[]-0.0116",evt);"
             onmouseout="TestToolTipOBJ.ToolTipHide(evt);"/>
           </a>

        Siehe Punkt 3.

        4. Soll innerhalb des Methodenaufrufes von ToolTipShow(...) eine Rechenoperation stattfinden (-0.0116) oder wird das als Zeichenkette weiter verarbeitet? Sieht jedenfalls etwas merkwuerdig aus.

        SVG-Probleme hast Du eigentlich eher nicht ;-).

        MfG, Thomas

        1. Hallo Thomas,

          das Javascript ist nur zum Tooltip anzeigen und funktioniert,
          das SVG funktioniert auch.

          Das mit dem embed Tag ist der Auslöser für mein Problem.
          Es führte zu einem Deathlock (oder so ähnlich) wenn man viele Grafiken darstellen möchte deshalb IFrame (oder gibt es noch was besseres??) Object hat auf 2 Rechnern nicht funktioniert und ich konnte die Ursache nicht rausfinden (selber Explorer selbes Plugin)

          Ich habe jetzt versucht auf onclick zu ändern:
          (passier grad gar nichts weil ich nicht weiss wie man so den submit Befehl ausführt)

          <a  onclick="evt.target.setAttribute("AFO180/3/006","top.document.merkmalForm.fertigungsMaschine.value");evt.target.setAttribute("450D_FV","top.document.merkmalForm.merkmal.value");evt.target.setAttribute("submit","top.document.merkmalForm");"

          <circle style="fill:rgb(0,0,255);stroke:rgb(255,255,0);stroke-width:1"cx="250.556" cy="124.559" r="2"
          onmouseover="TestToolTipOBJ.ToolTipShow("Der Mittelwert beträgt[]-0.0119",evt);"
          onmouseout="TestToolTipOBJ.ToolTipHide(evt);"/>
          </a>

          Das ist die zugehörige JSP in der ich die Form ansprechen möchte:
          <form id="merkmalForm" name="merkmalForm" action='<html:rewrite page="/showTrendMerkmal.do"/>'>
              <input type="hidden" name="fertigungsMaschine" value='<bean:write name="fertigungsMaschine"/>'>
              <input type=hidden name="merkmal" value='<bean:write name="merkmal"/>'>
            </form>

          Danke und viele Grüße
          Christian

          1. Hallo,

            Das mit dem embed Tag ist der Auslöser für mein Problem.
            Es führte zu einem Deathlock (oder so ähnlich) wenn man viele Grafiken darstellen möchte deshalb IFrame (oder gibt es noch was besseres??) Object hat auf 2 Rechnern nicht funktioniert und ich konnte die Ursache nicht rausfinden (selber Explorer selbes Plugin)

            AFAIK sind iframe-Elemente der beste Kompromiss.

            Ich habe jetzt versucht auf onclick zu ändern:
            (passier grad gar nichts weil ich nicht weiss wie man so den submit Befehl ausführt)

            <a  onclick="evt.target.setAttribute("AFO180/3/006","top.document.merkmalForm.fertigungsMaschine.value");evt.target.setAttribute("450D_FV","top.document.merkmalForm.merkmal.value");evt.target.setAttribute("submit","top.document.merkmalForm");"

            Da sind noch immer doppelte innerhalb von doppelten "..."!
            Ersetze außerdem evt.target.setAttribute("submit","top.document.merkmalForm"); durch top.document.merkmalForm.submit();

            MfG, Thomas

            1. top.document.merkmalForm.submit() habe ich auch schon oft versucht
              Es kommt hierbei immer: ist null oder kein Object
              Bei parent kommt immer keine Berechtigung
              Das mit den Anführungszeichen hab ich auch schon oft getestet.

              Ich glaube, dass ist das erste SVG-Problem welches ich nicht lösen kann

              <a  onclick="evt.target.setAttribute('AFO180/3/006','top.document.merkmalForm.fertigungsMaschine.value');evt.target.setAttribute('460D_FV','top.document.merkmalForm.merkmal.value');top.document.merkmalForm.submit()"><rect x='282.2222222222222' y='119.5000005515' width='21.11111111111111' height='8.000000380000017' style='fill:#009966;stroke:rgb(0,0,0);shape-rendering:crispEdges;stroke-width:1' onmouseover='TestToolTipOBJ.ToolTipShow("Das dritte  Quartil beträgt -0,0109[]Das erste Quartil beträgt -0.0125",evt);' onmouseout='TestToolTipOBJ.ToolTipHide(evt);'/></a>

              Wenn Dir noch etwas einfällt danke ich dir von Herzen ansonsten natürlich auch vielen Dank
              Christian

              1. Hallo,

                top.document.merkmalForm.submit() habe ich auch schon oft versucht
                Es kommt hierbei immer: ist null oder kein Object
                Bei parent kommt immer keine Berechtigung

                Schwierig zu beurteilen, wenn das HTML- bzw. SVG-Umfeld fehlt. Mein Beispiel zeigt aber durchaus den Zugriff auf ein uebergeordnetes Formularfeld und wenn beim form-Element ein passendes action-Attribut steht, sollte sich auch ein submit() ausloesen lassen.

                Ich glaube, dass ist das erste SVG-Problem welches ich nicht lösen kann

                <a  onclick="evt.target.setAttribute('AFO180/3/006','top.document.merkmalForm.fertigungsMaschine.value');...

                Was mich an diesem Code sehr verwundert ist die Zuordnung dieser seltsamen Attribute an einer IMHO unpassenden Stelle.

                evt.target zeigt auf das eventausloesende Element. Schreibe mal onclick="alert(evt.target)" --> [object SVGAElement] onclick="alert(evt.target.tagName)" --> a

                Hier wird also beim aktuellen a-Element ein Attribut mit dem Namen 'AFO180/3/006' erzeugt. Mal abgesehen von den ungueltigen '/'-Zeichen im Attributnamen ist das nicht so richtig nachvollziehbar fuer mich.

                MfG, Thomas

                1. Guten Morgen,

                  ich habe dir einmal einen Chart geschickt!
                  In diesem habe ich onclick="alert(evt.target)"
                  und onclick="alert(evt.target.tagName)"
                  eingebaut. Das funktioniert!
                  Hinter der Graphik steht recht viel arbeit,
                  sie wird dynamisch über java-zusammengebaut.
                  Im Internet-Explorer (nur dafür muss ich es optimieren)
                  kommen keine Fehlermeldungen.
                  Die Anwendung läuft auf einem Tomcat.
                  Liegt es an meinen Fehlern oder weil es generell nicht geht?
                  Mit dem embed-Tag ging es jedenfalls, weil ich das Parent/Top element nicht ansprechen musste!

                  Das ist die zugehörige Form in der JSP:

                  <form id="merkmalForm" name="merkmalForm" action='<html:rewrite page="/showTrendMerkmal.do"/>'>
                      <input type="hidden" name="fertigungsMaschine" value='<bean:write name="fertigungsMaschine"/>'>
                      <input type=hidden name="merkmal" value='<bean:write name="merkmal"/>'>
                    </form>

                  Mit freundlichen Grüßen

                  1. Hallo,

                    ich habe dir einmal einen Chart geschickt!

                    OK, sieht gut aus, aber zur Problemloesung hilft es nicht, weil die Verbindung zum enbindenden HTML-Dokument fehlt.

                    Das ist die zugehörige Form in der JSP:

                    <form id="merkmalForm" name="merkmalForm" action='<html:rewrite page="/showTrendMerkmal.do"/>'>
                        <input type="hidden" name="fertigungsMaschine" value='<bean:write name="fertigungsMaschine"/>'>
                        <input type=hidden name="merkmal" value='<bean:write name="merkmal"/>'>
                      </form>

                    Wenn HTML- und SVG-Dokument derselben Domain zugeordnet sind, sollte der Zugriff funktionieren. Prüfe mal die IE-Sicherheitseinstellung "Programme und Dateien in einem IFRAME starten".

                    MfG, Thomas

                    PS: Gib mir mal Bescheid, wenn die Anwendung online verfuegbar ist. Waere eine Erwaehnung in meiner Ressourcensammlung wert.

                    1. Hallo es geht mit:

                      parent.parent!!!

                      onclick="parent.parent.gotoTrendMerkmal('AFO180/4/006','420D_FV')

                      function gotoTrendMerkmal(fm, merkmal) {
                          document.merkmalForm.fertigungsMaschine.value = fm;
                          document.merkmalForm.merkmal.value = merkmal;
                          document.merkmalForm.submit();
                        }

                      Ich kann dir leider die Anwendung nicht zeigen, da sie fürs
                      Intranet unseres Auftraggebers gemacht wird!

                      Vielen Danke für Deine Hinweise!

                      Gruß Christian