Tengo un elemento iframe dentro de mi componente y necesito detectar de alguna manera cuándo cambia la URL de ese iframe. Lo que he probado hasta ahora:

1. Se agregó la devolución de llamada onLoad , pero esto no se activa cada vez que redirijo en el iframe
2. Usé React.useCallback pero tampoco funciona como quería
3. Cree un tiempo de timeout y obtenga la URL del iframe cada x segundos

Ejemplo de código minimalista a continuación

 export const XComponent = (props: XComponentProps) => { const ref = React.useRef<any>(); 1. const onLoad = () => { const url = ref.current.contentWindow.location.href; // do stg with url } 2. const getRef = React.useCallback((node: any) => { // store node into state, this was not triggered properly either }, []); 3. React.useEffect(() => { const interval = setInterval(() => { const url = ref.current.contentWindow.location.href; }, 1000); return () => clearInterval(interval); }, []); return ( <div className={ styles.albertStoremanTab }> <div className={ styles.container }> <iframe id={"iframe-my-id"} onLoad={onLoad} src={props.defaultUrl} ref={ref}></iframe> </div> </div> ); };