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

Posted 2023-02-23

【中文标题】Angular 5 - 当用户关闭浏览器窗口时如何进行 API 调用？

【英文标题】：Angular 5 - How to make an API call when user closes the browser window?

【发布时间】：2018-10-26 03:21:22

【问题描述】：

我有一个跟踪机制，在用户停留在网页上期间，我通过该机制将 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 中。

【问题讨论】：

你能进入函数 beforeUnloadHander 和 unloadHandler 的内部吗？您希望您的 API 接收什么？

只有当我到达return false 时，我才能联系到beforeUnloadHandler()。当我这样做时，浏览器会询问我是否确定要退出该页面。但是那时用户可以响应 NO 并且浏览器保持窗口打开。所以现在不是联系 API 的合适时机。当用户离开页面时，我的 API 必须接收 JSON 对象。

阅读此***.com/questions/276660/…

【参考方案1】：

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

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

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

【参考方案2】：

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

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

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

【讨论】：

嗨@Giovanni，哦不要认为你的语法和我的有区别。但无论如何我都会尝试并让你知道。还是谢谢