Angular 2+检测关闭窗口答案

【问题标题】：Angular 2+ detect closing windowAngular 2+检测关闭窗口
【发布时间】：2019-05-04 19:55:34
【问题描述】：

构建完成后无法检测到关闭窗口。

const newWindow = window.open(url, '_blank', options);
newWindow.onbeforeunload = () => null;
newWindow.addEventListener('beforeunload', (evt: BeforeUnloadEvent) => 
  {
    console.log(evt)
  }
);

在我进行构建之前它工作得很好，没有触发 beforeunload 事件。我还尝试在新窗口的组件中放置一个主机监听器：

@HostListener('window:beforeunload', [ '$event' ])
beforeUnloadHander(event: BeforeUnloadEvent): void {
  debugger;
}

但同样的问题在这里。构建完成后，我们不再到达调试器

有人知道我做错了什么吗？感谢您的帮助！

编辑解决方法

const heartBeatNewWindow = setInterval(() => {
  if (newWindow.closed) {
    this.canvasSettings.displayInNewWindow = false;
    clearTimeout(heartBeatNewWindow);
  }
}, 1500);

【问题讨论】：

尝试在beforeUnloadHander中返回false
@trichetriche 不幸的是结果是一样的。

标签： javascript angular angular6 window-object

【解决方案1】：

我不得不做类似的事情，我的方法如下：我在服务的构造函数中从关闭事件窗口创建了一个通用捕获，它们调用处理此事件的方法。在这个方法中，我验证了这个事件的起源是否正确，可以执行我需要的逻辑。看这个例子：

构造函数内部：

  if(window.addEventListener){
     window.addEventListener("message", this.authService.handleMessage.bind(this), false);
  }else{
     (<any>window).attachEvent('onmessage', this.authService.handleMessage.bind(this));
}

以及我处理该事件的方法：

handleMessage(event: Event) {
      event.preventDefault();
      const message = event as MessageEvent;

        // Only trust messages from the below origin.
        //
        if ((message.origin !== environment.BASE_URL)) return;

      const result = JSON.parse(message.data);

//Add your logic here

希望对你有所帮助。

【讨论】：