iFrame postMessage Not Reaching Wix – Need Guidance

[moodysdn]

Hi, I would like help getting the onMessage Velo code to work on my Wix page after receiving a postMessage from an iFrame element.

For context, I am hosting an app on Netlify. The postMessage works on the Netlify link when I create an onMessage listener. So, I believe there’s an issue with connecting the iFrame with the Wix page’s window.

Here is my Wix Code in the $w.onReady function:

const iframePanel = $w('#html1')
iframePanel.onMessage((event) => {
    let message = event.data
    console.log(message, ' <- Data received from Wix')
})

I do not have a premium Wix account, and I’ve tested it in both Preview and Published modes. Neither works.

I’m not getting anything in the console logs… any ideas, thoughts, or comments?

[onemoretime]

Hi, @moodysdn !!

It would be helpful for the community if you could share the code inside the iframe as well. Also, please check the browser console for any error messages.

[moodysdn]

Thanks much,

Below is the code from inside the iFrame element (with website removed):

<iframe width="100%" height="100%" src="https:...netlify.app/" allowfullscreen></iframe>

Additionally, the code that’s calling the postMessage is just a script function within the larger index.html file, and the browser console isn’t giving me any errors on either the direct Netlify site or Wix site. The test console.log message I’ve include in the below code works on both sites however

<script>
function postMessageWorkaround(message){
     window.parent.postMessage(message)
     console.log("This is a test message coming from inside the Head Include feature in Godot")
}
</script>

Lastly, and strangely… if I use the Chrome console to monitorEvents(window, 'message'),postMessage works only on the direct Netlify site but not on the Wix site that is hosting the iFrame

[noahlovell]

When sending a message from your HTML element using the postMessage() function, you should specify your site’s URL as the targetOrigin. If you use “*”, your message can be intercepted by a malicious site (More info here).

For example:

<script type="text/javascript">
  //...
  function respond() {
    window.parent.postMessage("To page code", "http://mysite.com");
  }
</script>

[moodysdn]

Thanks, Noah. I’ve seen this mentioned a few times. I can implement this after I get it working properly in-general

[moodysdn]

To future people with a similar problem,

try using the “website address” instead of the “code” option in the HTML settings. This worked for me and now I’m receiving the postMessage event… for now