11. Jak można przeprowadzić komunikację między window a iframe?

Element HTML iframe pozwala na uruchomienie strony internetowej wewnątrz innej strony internetowej.

Komunikacja pomiędzy nimi możliwa jest na dwa sposoby.

Jeśli aplikacja-rodzic (parent) i aplikacja w iframe wspóldzielą domenę, to współdzielą też localStorage. W takim wypadku możliwe jest przeprowadzenie nasłuchu na zmianach w localStorage i odpowiednie zareagowanie na nie.

//parent
const dataToSend = { message: "This is a message." };
localStorage.setItem("messageToIframe", JSON.stringify(dataToSend));

//iframe
window.addEventListener("storage", function (event) {
    if (event.key === "messageToIframe") {
        const dataReceived = JSON.parse(event.newValue);
        console.log(dataReceived.message); //This is a message.
    }
});

Taka komunikacja działa dwustronnie - zarówno iframe jak i parent mogą być nadawcą i odbiorcą.

Innym sposobem, bezpiecznym pod kątem CORS jest mechanizm wysyłania wiadomości. Pozwala też na sprawdzenie domeny, z której pochodzi wiadomość lub do której domeny trafi.

postMessage przyjmuje jako argumenty wiadomość oraz targetOrigin - jest to domena, pod którą musi by iframe, aby mogło otrzymać wiadomość. Oznaczenie jej jako * sprawi, że domena nie ma znaczenia.

//parent
localStorage.setItem("messageToIframe", JSON.stringify(dataToSend));
const dataToSend = { message: "This is a message." };
iframe.contentWindow.postMessage(messageData, "*");

//iframe
window.addEventListener("message", function (event) {
    if (event.origin === "http://localhost:8080") { //origin check
        const dataReceived = JSON.parse(event.data);
        console.log(dataReceived.message); //This is a message.
    }
});

Podobnie jak w przypadku nasłuchiwania zmian localStorage, komunikacja ta działa dwustronnie. Wystarczy w parent ustawić eventListener na message, a z poziomu iframe nadawać wiadomości do parenta (window.parent).