0

Is it possible to update state, based on the click of a button located inside an iframe?

I have a component which looks a little something like the below.

Within the iframe, there is a button for the user to click. I'd like to be able to set the state to true once the button is clicked. Is it possible to do that?

import ReactIframeResizer from 'react-iframe-resizer-super';

const Component = () => {
  const [state, setState] = useState(false);
  
  return (
    <ReactIframeResizer
      src={url}
    />
  )
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
David Fox
  • 55
  • 9
  • That might be possible if the domain of the iframe is in the same domain as your website. Then you would be able to add an event listener. – Emiel Zuurbier Sep 08 '22 at 08:25
  • @EmielZuurbier - it's not the same domain. Does this mean it's not possible? – David Fox Sep 08 '22 at 09:09
  • I do believe that is the case. You'd be dealing with the same-origin policy where you can't access an iframe if the origin is not the same. However, if you are the author of the site in the iframe, then [this](https://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy) might be something to look into. – Emiel Zuurbier Sep 08 '22 at 10:18

0 Answers0