Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

[JavaScript] Modifikation eines IFrames und anschließender Ausgabe

Empfohlene Antworten

Veröffentlicht

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 von Shadowman

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

  • Autor

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 :D

Somit ein kleiner Beweis an alle Skeptiker:

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

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. ;)

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.