Question

我有一个包含iframe的应用程序，iframe正在渲染一个角度为4的应用程序。我试图通过以下方式收听iframe的网址：

frame.src = appSource;
    frame.addEventListener('load', function () {
        frame.contentWindow.window.sdk = frame.contentWindow.window.sdk || sdk;
        frame.contentWindow.window.addEventListener('hashchange', () => console.log('url changed!!!'), true);
    }, true);

不幸的是，我无法看到console.log消息。角度应用程序（位于iframe内）使用角度路由器在页面之间导航，使用如下代码：

this.router.navigate(['/page']);

此外，角度应用程序在useHash: true：

中使用RouterModule

RouterModule.forRoot(ROUTES, {useHash: true, preloadingStrategy: AppCustomPreloader })

我尝试将其替换为useHash: false并将事件监听器更改为onpushstate，但不幸的是，它没有用。

知道如何收听角度应用的URL更改？

Answer 1

查看角度导航事件：https://angular.io/guide/router#router-events

EG。你可以在Angular上的NavigationEnd上调用window.postMessage并在父框架中监听它。 https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

IE中。没有办法从帧外检测哈希变化或历史推送，但postMessage是一种安全的帧间通信方式。

聆听角度应用程序的URL更改

1 个答案: