typescript Angular 6中的浏览器选项卡关闭事件仅在调试模式下工作

2fjabf4q 于 2023-03-19 发布在 TypeScript

关注(0)|答案(2)|浏览(114)

我试图捕捉浏览器事件，如标签关闭和刷新在我的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();
}

这个问题可能有什么问题？

typescript

来源：https://stackoverflow.com/questions/54919064/browser-tab-close-event-in-angular-6-only-works-in-debug-mode

2条答案

按热度按时间

6tqwzwtp1#

您需要使用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。

赞(0）回复(0）举报 2023-03-19

gc0ot86w2#

@HostListener('window:unload')
async ngOnDestroy() {

  await this.oneService.handleSignOut();

}

这只会在关闭窗口/选项卡时发生。

赞(0）回复(0）举报 2023-03-19

我来回答

typescript Angular 6中的浏览器选项卡关闭事件仅在调试模式下工作

2条答案

相关问题

热门标签

最新问答