Sometimes, you will need to embed an iframe in your site. What happens if you want to communicate data between your site and an iframe?
So, if you are thinking about that, then this posts is for you ^^

Communication between parent.html and iframe.html

We will have two way iframe communication. The main difference between the two pages (parent.html, iframe.html) is the method of sending messages.
Recieving messages is the same in both.

In parent.html

  • Send messages to an iframe using iframeEl.contentWindow.postMessage
  • Recieve messages from an iframe using window.addEventListener('message')

In iframe.html

  • Send messages to parent window using window.parent.postMessage
  • Recieve messages from parent window using window.addEventListener('message')

Live example:

https://codepen.io/phudev95/project/full/ZKrkKE

Code demo:

parent.html
iframe.html

Hope this posts is useful for you ^^

Resources:
- Two way iframe communication