检测 iframe 内 SPA（单页应用程序）的 URL 更改

Posted 2023-02-22

【中文标题】检测 iframe 内 SPA（单页应用程序）的 URL 更改

【英文标题】：Detect URL change of SPA (single page app) inside iframe

【发布时间】：2021-01-25 13:37:21

【问题描述】：

我有一个渲染 iframe 的 React Web 应用程序。 iframe 显示简单的网站或 SPA 网站。 每次 iframe 中的 URL 更改时，我都想调用一个函数。 多个解决方案正在使用 "onLoad" ，但这不适用于我检查过的 SPA 应用程序 URL 更改。 任何人都有检测 SPA 的 iframe URL 更改的解决方案？

代码示例：

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/ 是我在本地运行的 SPA

onLoad 作用于页面的初始加载，但是当 URL 更改时（使用 react-router）什么也没有发生。

【参考方案1】：

如果您可以同时控制 iframe 和包装器，则可以使用 postMessage。在 iframe 中添加一个事件处理程序，以便在加载文档时向外部浏览器发布一条包含新 url 的消息。

【讨论】：

谢谢，它有效。有没有其他方法可以在不控制 iframe 孩子的情况下做到这一点？