JavaScript Problem mit iFrames und JavaScript

#1
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
#2
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?
 
#3
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