search

officert / vue-friendly-iframe

A Vue js component for creating super fast loading, non-blocking iframes.
https://officert.github.io/vue-friendly-iframe/
307 stars 57 forks source link

How can i receive a message from the iframe? #11

Closed danieljosephbrennan closed 5 years ago

danieljosephbrennan commented 5 years ago

This is great. Very helpful. I need to intercept a message from the page in the iframe. I was using window.addEventListener on the iframe. Is there a better way to handle this with this component?

corepay commented 5 years ago

Looking through the code trying to find a slot for the following:

On load, the parent hosting my web-app via iFrame needs to send me the userId. I receive the userId, fetch data from my backend and present the user specific data. Been racking my brains for 3 days now trying to find out how to do this using nuxt....any tips?

officert commented 5 years ago

To listen to messages in the parent window you'll need to do window.addEventListener('message', ...your event handler)

If you add a refs with Vue, you can access the actual iframe element using this.$refs.friendlyIframe.iframeEl and publish messages to the iframe using this.$refs.friendlyIframe.iframeEl.contentWindow.postMessage('message name')

Here's the HTML for the component with Vue Friendly Iframe:

<vue-friendly-iframe ref="friendlyIframe" :src="iframeSrc"></vue-friendly-iframe>