Handling of iframes in React
Emir Bakhtarov

Hi, thanks for this tutorial. It helped a lot.

There are some improvement that should be made for better experience:

  1. You should postMessage() after the iframe content is loaded, not right-away:
componentDidMount() {
this.ifr.onload = () => {
this.ifr.contentWindow.postMessage('hello', '*');

2. Your unmount code won’t work since you’re usind a ES7 bind operator for listener. That creates a new listener instance everytime component is mounted. To fix just don’t use function bind. If you need it, follow this guide (CTRL+F “Functions create identities too”)


Otherwise, very nice tut. thanks again.

Like what you read? Give Srigi a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.