iframe handling in react

iframe_handling_in_react.js

import React from 'react';
import { connect } from 'react-redux';

class PageWidget extends React.Component {
  componentDidMount() {
    this.ifr.onload = () => {
      this.ifr.contentWindow.postMessage('hello', '*');
    };
    window.addEventListener("message", this.handleFrameTasks);
  }

  componentWillReceiveProps(nextProps) {
    for (const [objectid, liveData] of Object.entries(nextProps.objectsLive)) {
      ........
      const prevOn = this.props.objectsLive[objectid] ? this.props.objectsLive[objectid].on : null;
      if (prevOn !== liveData.on) {
        this.ifr.contentWindow.postMessage({ event: 'onoff', object: objectid, value: liveData.on }, '*');
      }
    }
  }

  shouldComponentUpdate() {
    return false;
  }

  componentWillUnmount() {
    window.removeEventListener('message', this.handleFrameTasks);
  }

  sendToFrame(data) {
    if(this.ifr) this.ifr.contentWindow.postMessage(data, '*');
  }

  handleFrameTasks = (e) => {
    if (e.data.type === 'bookmark') {
      this.sendToFrame({ event: 'bookmark', data: window.location.hash ? window.location.hash.substr(1) : null });
    }
  }

  render() {
    return (
      <div>
        <iframe
          sandbox="allow-scripts"
          style={{ width: '100%' }}
          src="https://iframe.com/"
          ref={(f) => { this.ifr = f; }}
        />
      </div>
    );
  }
}

export default PageWidget;

I believe you are missing window.addEventListener("message", this.handleFrameTasks); in your componentDidMount()

I'm trying to detect url hash changes from the iframe in my app and failing dismally. any tips?

@gtabmx I think your right would be useful if that was in the gist as it confused me slightly. wondering if @ebakhtarov could update this really helped me thanks very much.

Indeed, window.addEventListener was missing. Updated the code.