Question

我正在尝试在我的angular 6应用程序中捕获浏览器事件，例如关闭选项卡和刷新。它在调试模式下可以正常工作，但如果我关闭调试模式并运行应用程序，则无法正常工作。下面是一段代码

registerDOMEvents() {
  window.addEventListener('unload', () => {
    if (this.validNavigation === 0) {
      this.endSession();
    }
  });
  document.addEventListener('keydown', (e) => {
    const key = e.which || e.keyCode;
    if (key === 116) {
      this.validNavigation = 1;
    }
  });
}
endSession() {
  this.logout();
  localStorage.clear();
}
ngOnInit() {
  this.registerDOMEvents();
}

我可能对此问题有什么看法？

Answer 1

您需要使用beforeunload而不是unload。 beforeunload更可靠，并在文档和其资源即将被卸载时触发，而unload在页面已被卸载时触发。

您的endSession()必须是同步的，因为在调用任何回调时浏览器不会等待。据我所知，Angular http服务不提供同步http调用，但是您可以自己使用XMLHttpRequest：

window.addEventListener("beforeunload", function (event) {
  var client = new XMLHttpRequest();
  client.open("POST", "http://url/to/endsession", false); // third parameter indicates sync xhr
  client.setRequestHeader("Content-Type", "application/json");
  client.send('{userId: "42"}');
  console.log('done!!!'); // outputs when a response is received 
});

也请看一下此article。如果客户端的浏览器支持该功能，则可以使用navigator.sendBeacon。

angular 6中的浏览器选项卡关闭事件仅在调试模式下有效

1 个答案: