[JavaScript] Modifikation eines IFrames und anschließender Ausgabe

[Shadowman]

Die Grundidee:

Ich möchte eine PHP Seite als Teil in einer anderen Seite einbinden, ohne diese neu zu laden. Die Verwendung von AJAX ist leider nicht möglich, da ich es nicht beherrsche. Somit kam ich nach längerem Überlegen und Suchen auf die Idee, eine PHP Datei in einen IFrame zu laden und den Inhalt auszulesen.

Folgendes Problem:

Testweise habe ich den IFrame sichtbar gemacht, aber hier kommt erstmal Code, damit Ihr geneueres seht

Der JavaScript Teil:

<script type="text/javascript">

  function show_menu(menu) {

    document.getElementById('testframe').src = "map_info.php?a="+menu;

    alert(document.getElementById('testframe').contentWindow.document.body.innerHTML);

  }

</script>[/PHP]

und der HTML Teil:

[PHP] <div class="map_info_header" onclick="show_menu('npcs');">NPC</div>

<iframe id="testframe" src="empty.html"></iframe>

Leider ist das alert beim ersten klicken immer leer und wenn ich auf einen anderen Link klicke, der ähnlich aufgebaut ist, bekomme ich nur die vorherigen Werte ausgegeben.

somit bin ich auf die Idee gekommen es zu modifizieren um das Problem genauer zu erkennen:

<script type="text/javascript">

  function show_menu(menu) {

    document.getElementById('testframe').src = "map_info.php?a="+menu;

    alert("test");

    alert(document.getElementById('testframe').contentWindow.document.body.innerHTML);

  }

  function get_content(menu) {

    alert("test2");

  }

</script>[/PHP]

[PHP] <div class="map_info_header" onclick="show_menu('npcs');get_content('npcs');">NPC</div>

<iframe id="testframe" src="empty.html"></iframe>

sowohl der alert, der "test" als auch der, der "test2" ausgibt werden erst ausgeführt und dann wird der IFrame geladen.

Hat jemand eine Idee, wie ich eine weitere Verarbeitung nach laden des IFrames starten kann?

Mfg Shadowman

Bearbeitet 16. Februar 2011 von Shadowman

[Wulf...]

Hallo ^^

Wie du bereits richtig erkannt hast, wird in deinem Javascript Code ja der Inhalt des Iframes direkt nach der Übergabe der neuen URL abgefragt - zu diesem Zeitpunkt ist natürlich die Seite im Iframe noch nicht fertig geladen.

Ein ganz einfacher Lösungsansatz wäre es, einfach in den im Iframe geladenen Seiten Javascript einzubaun, der eben am Ende der Seite oder im onload-Event des Bodys steht, und dann eben den Inhalt ans Parent (das Haupt-Window) zu übergeben, z.B. so:

Hauptfenster:

...

<script type="text/javascript">

  function show_menu(menu) {

    document.getElementById('testframe').src = "map_info.php?a="+menu; 

  }

</script>

...

<div class="map_info_header" onclick="show_menu('npcs');">NPC</div>

<div id="content_box"></div>

<iframe name="testframe" src="empty.html"></iframe>

Beispielausgabe für map_info.php?a=npcs :

<div id="return_content">

  <ul><li>NPC 1</li><li>NPC 2</li></ul>

  ...

</div>

<script type="text/javascript">

  parent.document.getElementById('content_box').innerHTML = document.getElementById('return_content').innerHTML;

</script>

Grüße Wulf

[Shadowman]

Du bist der hammer!

Der einfache Lösungsansatz mit dem Zurückgeben an das Parent Element hat super geklappt. Ich habs zwar ohne ein div in der child Datei gemacht und das document.body.innerHTML zurück gegeben, aber es klappt super.

Tausend dank für diese Idee

Somit ein kleiner Beweis an alle Skeptiker:

Asynchrone Dateiverwendung geht auch ohne AJAX (bisher habe ich im Internet nur das Gegenteil gelesen)

[Toothrot]

Somit ein kleiner Beweis an alle Skeptiker:

Asynchrone Dateiverwendung geht auch ohne AJAX (bisher habe ich im Internet nur das Gegenteil gelesen)

Es ist nur wesentlich komplizierter. Wie man per AJAX Inhalte nachläd hat man sich eigentlich in ein wenigen Minuten angelesen. So schwer ist das nicht.