Per "Klick" soll Inhalt einer anderen HTML Seite ändern

  • Hallo miteinander,


    Ich möchte, per Klick auf der Main.html Seite, die Result.html Seite verändern.

    Leider kann ich mit document.getElementID nicht auf die Result.html Seite zugreifen. (Referenziert auf null)


    Gibt es eine Möglichkeit, dass ich von der Main Seite eine Result Seite per Klick verändern kann?


    Hier meine Idee, welche leider nicht funktioniert:


    Die Console gibt für x "null" raus.

    Wie kann ich von dieser Funktion auf eine neue HTML Seite zugreifen und dort daten verändern?


    Danke vielmals für eure Hilfe...


  • Solange die Seite unabhängig dasteht, wüsste ich keine Möglichkeit (jedenfalls nicht clientseitig mit JS). Eine Verbindung von main.html nach result.html kannst Du nur herstellen, indem Du letztere durch erstere öffnest:

    • entweder durch einen Link. Dann kannst Du über die URL Parameter übergeben und auf der result-Seite auswerten.
    • oder durch die Javascript-Funktion window.open, was aus verschiedenen Gründen weniger zu empfehlen ist. Dann hast Du Zugriff auf das DOM der result-Seite und kannst diese direkt verändern.

    Beschreib doch mal das Umfeld, in dem das stattfinden soll, dann kann man die Frage u. U. besser beantworten.

  • Hallo Sempervivum,


    Besten Dank für die rasche Rückmeldung.


    Die zweite option (window.open) habe ich bereits versucht, habe es so jedoch ebenfalls nicht hingekriegt.


    Das Umfeld ist wie folgt:


    - per klick auf ein Icon, wird per AJAX POST ein JSON Objekt an eine REST Ressource geschickt.


    Ich möchte nun auf der result.html, alle gesendeten JSON Objekte, anzahl der gesendeten Objekte und das letzte gesendete JSON Objekt anzeigen lassen.


    Bis jetzt mache ich es über die Console (Um die Funktion zu überprüfen). Ich fände es jedoch schöner, wenn ich das ganze in einer result.html seite anzeigen lassen könnte.


    Danke schon jetzt vielmals für deine Hilfe

  • Zitat

    Die zweite option (window.open) habe ich bereits versucht, habe es so jedoch ebenfalls nicht hingekriegt

    Wenn Du die Nachteile akzeptierst, bin ich recht sicher, dass man das zum Laufen bringen kann.

    Wie hier bei Selfhtml beschrieben:

    https://wiki.selfhtml.org/wiki/JavaScript/Window/open

    liefert window.open als Return-Wert das window-Objekt der geöffneten Seite. Damit hast Du vollständigen Zugriff darauf, z. B. so:

    Code
    1. var fenster = window.open("result.html");
    2. fenster.document.getElementById("die-id").innerHTML = "ein Text";

    Ich empfehle jedoch, auch dem Hinweis auf Selfhtml nachzugehen und zu prüfen, ob auch ein Modal verwendet werden kann.

  • Ich habe das mit dem window.open jetzt ein wenig getestet und heraus gefunden, warum das, was ich oben gepostet hatte, nicht funktioniert:

    Bevor man auf Elemente der geöffneten Seite zugreift, muss man warten, bis diese existieren, z. B. durch das onload-Event. Dieses funktioniert dann:

    Code
    1. <button id="openbtn">Klick um test14.html zu öffnen</button>
    2. <script>
    3. document.getElementById("openbtn").addEventListener("click", function () {
    4. var fenster = window.open("test14.html");
    5. fenster.addEventListener("load", function () {
    6. fenster.document.getElementById("testopen").innerHTML = "Hallo von test16.html";
    7. });
    8. });
    9. </script>