Vuejs recieve event from iframe using postmessage

Question

according to this topic Calling a parent window function from an iframe

Say that iframe can send data back to parent window.

Now I implement it using vuejs and my code is

<v-card>
   <iframe :src="url" style="width:100%; height:100vh; border:0px;"></iframe>
</v-card>

and in iframe url I put the script like

$('#uploadbtn').bind("click",function(){
     window.parent.postMessage({
       'func': 'parentFunc',
        'message': 'Message text from iframe.'
     }, "*");
});

when user click button it will send message back to parent (vue component).

My question is how can I write code in VueJS side to get message from iframe?

Thank you

score 14 · Answer 1 · answered Jul 02 '20 at 05:37

You would need to attach an event listener on the window for message events.

For example (in your component)

methods: {
  receiveMessage (event) {
    console.log(event.data)
  }
},
mounted () {
  window.addEventListener('message', this.receiveMessage)
},
beforeDestroy () {
  window.removeEventListener('message', this.receiveMessage)
}

See https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#The_dispatched_event

Vuejs recieve event from iframe using postmessage

1 Answers1