postMessage funktioniert nicht - eigentlich total easy

  • Hallo Zusammen,


    ich benötige mal eure Hilfe. Folgende Anforderung:


    Bitte schreibe mir ein Script in in Javascript. Es gibt drei Button. Jeder dieser Buttongreift auf Bild 4 zu. Beim Klick auf den ersten Button soll Bild 4 für 5 sekunden lang in Bild 1 geändert werden. Danach wird wieder Bild 4 angezeigt. Beim Klick auf den zweiten Button soll Bild 4 für 5 sekunden lang in Bild 2 geändert werden. Beim Klick auf den dritten Button soll Bild 4 für 5 sekunden lang in Bild 3 geändert werden. Die Buttons zum ändern der Bilder sind auf Website 1. Auf Website 2 werden dann die geänderten Bilder angezeigt.

    Website 1 ist unter http://www.sammel-kiste.de)ABC/website1.html zu finden und Website 2 ist unter http://www.sammel-kiste.de/ABC/website2.html zu finden. Beide Seiten liegen auf dem gleichen Server und innerhalb des gleichen Ordners.


    Ich habe was überlegt, aber es funktioniert nicht. Ich weiß nicht ob es an den Pfaden liegt oder ob der Server einfach das Senden von Informationen nicht zulässt Was sagt ihr wo das Problem liegt?


    Website 1:

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Website 1</title>

    </head>

    <body>



    Website 2:

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Website 2</title>

    </head>

    <body>

    <!-- Ein Bild, das sich ändert -->

    <img id="gifImage" src="bild4.gif" alt="Bild 4">


    <script>

    // Bild-Element holen

    const gifImage = document.getElementById("gifImage");


    // Nachrichten-Event Listener

    window.addEventListener("message", function(event) {

    if (event.origin === "https://www.sammel-kiste.de") {

    const { newImage } = event.data;

    gifImage.src = newImage;


    // Nach 5 Sekunden das Bild auf bild4.gif zurücksetzen

    setTimeout(function() {

    gifImage.src = "bild4.gif";

    }, 5000);

    }

    });

    </script>

    </body>

    </html>



    <!-- Drei Buttons -->

    <button id="button1">Button 1</button>

    <button id="button2">Button 2</button>

    <button id="button3">Button 3</button>


    <script>

    // Button-Elemente holen

    const button1 = document.getElementById("button1");

    const button2 = document.getElementById("button2");

    const button3 = document.getElementById("button3");


    // Event Listener für die Buttons

    button1.addEventListener("click", function() {

    changeImageOnWebsite2("bild1.gif");

    });


    button2.addEventListener("click", function() {

    changeImageOnWebsite2("bild2.gif");

    });


    button3.addEventListener("click", function() {

    changeImageOnWebsite2("bild3.gif");

    });


    // Funktion zum Ändern des Bilds auf Website 2

    function changeImageOnWebsite2(newImage) {

    // Nachricht an Website 2 senden

    window.parent.postMessage({ newImage }, "https://www.sammel-kiste.de/ABC");

    }

    </script>

    </body>

    </html>



    Website 2:

  • Hallo Bierprinzessin, willkommen im Forum!

    In deinem Code gibt es folgendes Problem:

    Um eine Nachricht auf diese Weise verschicken zu können, brauchst Du das Window-Objekt des Zielfensters. Um das zu bekommen, musst Du z. B. die Zielseite mit window.open öffnen. Und um sicher zu gehen, dass das Öffnen nicht durch einen Popup-Blocker geblockt wird (das war in meiner Testdatei der Fall) musst Du das Fenster durch Interaktion mit dem Benutzer, z. B. Mausklick, öffnen.

    So funktioniert es dann bei mir so weit, dass die Nachricht auf der Zielseite an kommt:

    Natürlich musst Du die URLs meiner Testumgebung wieder durch deine ersetzen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!