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 ponent).

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

Thank you

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 ponent).

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

Thank you

• javascript
• vue.js

1 Answer 1

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

For example (in your ponent)

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

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