3

I have a React web app which render iframe. The iframe shows simple website or SPA websites. I want to invoke a function every time the URL changes in the iframe. Multiple solutions are using the "onLoad" , but this doesn't work for SPA application URL changes as I checked. Anyone have a solution to detect iframe URL change of SPA?

Code example:

function App() {

  return (
    <div >
      <iframe id='iframeid' onLoad={(e)=>{console.log('page loaded', e)}} src="http://127.0.0.1:8001" style={{position: 'absolute', height: '100%', border: 'none'}} width='100%'></iframe>
    </div>

  );
}

export default App;

http://127.0.0.1:8001/ is SPA which I run locally

The onLoad work on the initial loading of the page, but when URL changes (using react-router) nothing happens.

James Whiteley
  • 3,363
  • 1
  • 19
  • 46
ran gantz
  • 31
  • 2

1 Answers1

1

If you have control over both the iframe and the wrapper you can use postMessage. Add an event handler inside your iframe so that when the document loads you post a message to the outer browser containing your new url.

Will Jenkins
  • 9,507
  • 1
  • 27
  • 46