JavaScript Problem mit iFrames und JavaScript

Dravis

New member
Hallo,
ich habe ein Problem mit einem JS und stehe hier irgendwie auf dem Schlauch. Ich versuche das Problem mal etwas vereinfacht darzustellen.
Im Firebug habe ich den folgenden Code
HTML:
<html>
  <body>
      ......
      <iframe id="masterFrame">
        <html>
            <body>
                <iframe id="slaveFrame">
                    <html>
                      <body>
                          <!-- SOME CODE -->
                          <div id="myDiv">
                                <!--- SOME CODE -->
                          </div>
                      </body>
                    </html>
                </iframe>
            </body>
        </html>
      </iframe>
      ......
  </body>
</html>
Ich möchte nun den DIV-Container aus dem iFrame "slaveFrame" mittels JS "herausheben", was mit folgendem JavaScript wunderbar funktioniert-

HTML:
<html>
  <body>
      ......
      <iframe id="masterFrame">
        <html>
            <body>
                <iframe id="slaveFrame">
                    <html>
                      <body>
                          <!-- SOME CODE -->
                          <div id="myDiv">
                              <!--- SOME CODE -->
                              <script>
                                 var myDiv = document.getElementById("myDiv");
                                 window.frameElement.parentNode.appendChild(myDiv);
                              </script>
                          </div>
                      </body>
                    </html>
                </iframe>
            </body>
        </html>
      </iframe>
      ......
  </body>
</html>
Das funktioniert auch problemlos, der Code sieht anschließend im Firebug wie folgt aus:

HTML:
<html>
  <body>
      ......
      <iframe id="masterFrame">
        <html>
            <body>
                <iframe id="slaveFrame">
                    <html>
                      <body>
                      </body>
                    </html>
                </iframe>
                <div id="myDiv">
                  <!--- SOME CODE -->
                  <script>
                      var myDiv = document.getElementById("myDiv");
                      window.frameElement.parentNode.appendChild(myDiv);
                   </script>
                 </div>
            </body>
        </html>
      </iframe>
      ......
  </body>
</html>
Mein Problem ist, ich will es noch einmal machen und aus dem masterFrame hängen und das will nicht klappen
Also ein erneutes

HTML:
window.frameElement.parentNode.appendChild(myDiv);
funktioniert nicht. Wo liegt mein Denkfehler ?

Danke
 

Chromatin

Moderator
Mitarbeiter
Mein Problem ist, ich will es noch einmal machen und aus dem masterFrame hängen und das will nicht klappen
Also ein erneutes
Dem kann ich nicht ganz folgen - wo genau machst du das nochmal?
 

BasicAvid

Member
Dem kann ich nicht ganz folgen - wo genau machst du das nochmal?
Ich glaube er möchte mit dem Div erst aus dem "slaveFrame" und dann auch noch aus dem "masterFrame" ausbrechen.


main-page.html
HTML:
<html>
    <head>
        <title>Test</title>
        <style>
            iframe {
                border: none;
                width: 80%;
                height: 500px;
            }
        </style>
    </head>
    <body>
      <p>Outer Master</p>
      <iframe id="masterFrame" src="master-iframe.html">
        
      </iframe>
     </body>
</html>
master-iframe.html
HTML:
<html>
    <head>
        <title>Master</title>
        <style>
            iframe {
                border: none;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
    <p>Outer Slave</p>
        <iframe id="slaveFrame" src="slave-iframe.html">
            
        </iframe>
        <script type="text/javascript">
            document.addEventListener("DOMSubtreeModified", function() {
                var myDiv = document.getElementById("myDiv");
                if (myDiv) {
                    window.frameElement.parentNode.appendChild(myDiv);
                }
            }, false);
        </script>
    </body>
</html>
slave-iframe.html
HTML:
<html>
    <head>
        <title>Slave</title>
        <style>
            iframe {
                border: none;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
  <body>
    <p>Inner Slave</p>
      <!-- SOME CODE -->
      <div id="myDiv">
          <p>Ich will raus hier!</p>
          <script type="text/javascript">
            var myDiv = document.getElementById("myDiv");
            if (myDiv) {
                window.frameElement.parentNode.appendChild(myDiv);
            }
          </script>
      </div>
  </body>
</html>
So sollte es funktionieren, Du brauchst im Master iFrame einen EventListener der auf Veränderungen im DOM lauscht. Dein Code funktioniert deshalb nicht, weil der Javascript Code-Block zwar mit verschoben wird, aber nicht mehr ausgeführt.
 
Oben