Angular 5 - 当用户关闭浏览器窗口时如何进行 API 调用？

Question

我有一个跟踪机制，在用户停留在网页上期间，我通过该机制将 JSON 对象发送到 API 端点。所以我正在发送一些特定事件的 API 调用。当用户离开页面时，API 必须接收调用。

问题是我使用下面的函数在用户关闭浏览器时触发，但这些函数仅在浏览器调试模式下触发。

// page-wrapper.component.ts ... // triggers on DOM unload @HostListener('window:unload', ['$event']) unloadHandler(event) { this.service.apiCall(); // this is nevertriggered console.log('unloaded DOM') // triggered only in browser debug mode } // triggers just before unloadHandler() @HostListener('window:beforeunload', ['$event']) beforeUnloadHander(event) { this.service.apiCall(); // same as above }

所以我尝试了这两种方法。如果我调试它们这些方法似乎被触发，但 API 没有收到任何东西。

我可以确保与 API 联系的函数已经过测试并且没有问题。

我认为问题与unloadHandler() 或beforeUnloadHandler() 有关。

当用户关闭浏览器窗口或浏览器选项卡时，有人知道如何调用 api 吗？

注意：应用程序可以存在于独立的浏览器选项卡或 iframe 中。

Answer 1

感谢@Francesco，我得出以下结论：

无法确保每次用户退出浏览器页面时都会触发特定功能。原因是浏览器可能出于多种原因关闭窗口。是的，它可能是用户操作，但这不是唯一的情况。例如浏览器可能会崩溃。

就我而言，我将不得不找到另一种策略来跟踪用户停留在页面上的时间。例如，我计划在用户退出之前发送大量 API 调用，其中包含我需要了解他在页面上停留的所有信息。当我找到一个好的解决方案时，我会更新答案。无论如何，我仍然会等待更好的答案。

Answer 2

你可以在你的 app.component.ts 中试试这个：

window.addEventListener('beforeunload', (e) => {
  yourApiCall();
});

我用它在卸载页面之前显示一条消息..