Receiving Messages from iframe in App Embed Block

[infinityp913]

Hi,

Question: Are there any restrictions in the Shopify Theme Engine that blocks "message" events from an iframe? I can't seem to listen for "message" events from an iframe that links to an external web page in an App Embed Block however I can do the same if I simply host the html/css/js code on locally.

Context:

I'm trying to listen for messages from an iframe in my App Embed Block. The iframe links to a webpage that sends a message with the data, "close-iframe", to window.top on clicking a button on the page.

The code for listening for the message in the app embed block is:

window.addEventListener('message', ({ data }) => {
        console.log("message received from iframe: ", data);
        if (data === "close-iframe") {
          console.log("close message received from iframe: ", data);
          //if we get a message from the iframe asking us to close the iframe, make the iframe invisible
          setIframeVisible = false;
          document.getElementById("iframe").classList.add("invisible");
        }
      });

The code in the linked webpage in the iframe that sends the message is:

window.top.postMessage("close-iframe")

 This setup works flawlessly on localhost but doesn't in the App Embed Block. The interesting thing is that my event listener does capture other messages like "RemoteUI::Initialize".

[infinityp913 · Accepted solution]

Solved -- for some reason it just didn't work in the theme editor. It works as expected on the actual test store's link.