Example of an iframe component that intercepts form submissions (with bugs)

IFrame.jsx

class IFrame extends PureComponent {
  constructor(props) {
    super(props);

    this.iframeElement = React.createRef();

    this.state = {
      location: props.location,
    };

    this.handleLoad = this.handleLoad.bind(this);
  }

  componentDidUpdate(prevProps, prevState) {
    const { location: nextLocation } = this.props;

    const iframeLocation = this.iframeElement.current.contentWindow.location;

    const { pathname: nextPathname, search: nextSearch } = nextLocation;
    const { pathname: iframePathname, search: iframeSearch } = iframeLocation;

    if (iframePathname !== nextPathname || iframeSearch !== nextSearch) {
     this.setState({ location: nextLocation });
    }
  }
  
  // ...

  handleLoad() {
    const { history } = this.props;
    const { location } = this.state;

    const iframeLocation = this.iframeElement.current.contentWindow.location;

    const { hash: currentHash, pathname: currentPathname, search: currentSearch } = location;
    const { hash: iframeHash, pathname: iframePathname, search: iframeSearch } = iframeLocation;

    // …

    if (iframeHash !== currentHash || iframePathname !== currentPathname || iframeSearch !== currentSearch) {
      history.push({
        hash: iframeHash,
        pathname: iframePathname,
        search: iframeSearch,
      });
    }
  }
  
  // ...
}