Блог

У меня есть веб-приложение React, которое отображает iframe. В iframe отображаются простые веб-сайты или веб-сайты SPA. Я хочу вызывать функцию каждый раз, когда URL-адрес изменяется в iframe. Несколько решений используют «onLoad», но это не работает для изменения URL-адреса приложения SPA, как я проверял. У кого-нибудь есть решение для обнаружения изменения URL-адреса iframe SPA?

Пример кода:

 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 / это СПА-центр, который я запускаю локально

Загрузка выполняется при начальной загрузке страницы, но при изменении URL-адреса (с использованием react-router) ничего не происходит.

Если у вас есть контроль как над iframe, так и над оболочкой, вы можете использовать postMessage. Добавьте обработчик событий внутри вашего iframe, чтобы при загрузке документа вы отправляли во внешний браузер сообщение, содержащее ваш новый URL.