[Vuejs]-AddEventListener 'message' return event.data undefined in VUE

by

0👍

Encountered the same issue. I have an iframe on a remote url, but when I try to use postMessage running locally it does this.

When I run a build, and push the app to S3, the postMessage works. Try the same thing running from a built ./dist folder and see if the same thing happens.

0👍

Your data is undefined and that’s a fact.

So your are receiving nothing because your html is created before your vue structure.

In other words, this is executed first:

 function receiveMessage (event) {
    console.log('event data: ', event)
  }

then:

 var msg = { text: 'Hola mundo'}
      iframe.contentWindow.postMessage(msg,'*')

So in the moment when you send data nobody is able to receive it and when your receiveMessage function is working nobody is sending data.

You can forced your html statement to execute after your vue structure creation of this way:

 setTimeout(function(){ iframe.contentWindow.postMessage(msg,'*'); }, 3000);

Hope it’s still helpful.

Leave a comment