Handling of iframes in React
Emir Bakhtarov
3696

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”)

https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f

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.