javascript - beforeunload 事件之前的 Angular8 IFrame

我有一个 angular 应用程序，它是在其中托管子应用程序的主应用程序。子应用程序也是 Angular 应用程序。我加载子应用程序的方式是通过 Iframes。

子应用程序显示为一个列表，当我单击一个选项卡时，该应用程序被加载。当我对应用程序中的数据进行一些更改时，如果我单击另一个子选项卡，我想显示一条警告消息，指出“更改将丢失”。我可以通过使用 beforeunload 事件来实现它，如下所示。我可以检查是否有任何未保存的更改并显示警告弹出窗口。

  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any) {
      if (**my logic here) {
          $event.returnValue =true;
      }
  }

唯一的问题是，当我单击另一个子选项卡时，主机应用程序会突出显示该子选项卡，然后显示警告弹出窗口。如果我单击弹出窗口上的停留按钮，我可以在我想要的子选项卡上，但在主机应用程序上，另一个子选项卡会突出显示。因此，如果我想留在当前的子选项卡上，我正在尝试寻找一种不突出显示其他选项卡的方法。在卸载之前的东西。

最佳答案

在子应用程序中

const origin = this.getCurrentHostOrigin();
if (cancelSwitchTab) {
    window.parent.postMessage({}, origin);
}

在主机应用程序中:

this.renderer.listen(this.windowsRef.nativeWindow, 'message', event => {
  const message = event.data;
  *** your logic to revert highlight to current tab ***
});

关于javascript - beforeunload 事件之前的 Angular8 IFrame，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62156377/