在浏览器中检测页面刷新或导航答案

【问题标题】：Detect Page Refresh or Navigation in Browser在浏览器中检测页面刷新或导航
【发布时间】：2021-09-10 02:00:00
【问题描述】：

我有一个 Web 应用程序，其中显示记录列表的父页面会打开一个新选项卡（“子”）来编辑点击记录。我想跟踪谁打开了一个页面，因此如果有多个人在编辑唯一记录，我可以显示一条消息。这意味着在页面关闭时进行报告。我为每个页面分配了一个 GUID，以便于识别页面实例。
所以浏览器中的javascript需要检测几种场景：

浏览器标签已关闭
浏览器刷新
浏览器导航到超链接
浏览器向前/向后导航

目前，所有这些似乎都触发了window.onbeforeunload 事件。但是，我使用此事件来警告基础数据的更改，这意味着该事件返回确认文本，并且在此事件中无法知道用户是否随后确认或取消页面卸载。所以我不能使用这个事件来跟踪页面关闭。

根据一些消息来源，window.onunload 事件应该在上述所有场景中触发（如果它是，我可以使用它），但在 Windows 上的 Chrome 下测试只是triggering this event in scenario 1 (when the tab is closed).它工作得很好。

我对缺乏这方面的信息感到非常惊讶 - 这肯定是现代网站的基本要求吗？

window.onunload 最近在某些情况下或某些浏览器的某些情况下是否已被弃用？当页面即将被其他信息替换时，如果没有可靠的挂钩，就不可能监视页面的关闭。还有其他解决方法吗？

我知道这两个unload 事件抑制了处理程序中的阻塞功能（例如警报）。然而，它们似乎会遇到断点，执行console.log 并允许 Ajax 调用就好了。我很确定他们没有在事件 2,3 和 4 中被触发——不仅仅是我的调试被阻止了。

【问题讨论】：

一般来说，您确实无法可靠地判断用户何时离开了页面，而且浏览器甚至无能为力。通常，网站会保留会话计时器并在一段时间后关闭会话。
为什么不从页面打开 websocket 或 eventsource 连接？服务器将知道连接是否断开，然后您可以合理地确定页面以某种方式被卸载。这种连接将为您提供一条推送有关同时编辑同一记录的通知的途径。
@David784 同意，HTTP 似乎不是尝试跟踪某些资源周围的并发活动的首选机制。
是的，我有点期待会是这样，但很糟糕。我可以使用某种保持活动状态的信号，例如您的 websocket，但相比之下，它的资源密集型和复杂性令人难以置信。此外，如果客户合上笔记本电脑的盖子并且页面进入休眠状态几个小时，然后他们打开它并继续他们离开的地方怎么办。所有这些场景都可以由onunload 轻松处理。

标签： javascript html page-refresh onunload

【解决方案1】：

虽然似乎已经有关于 SO 的答案（其中大部分不起作用或已弃用），但我发布此内容是因为随着安全问题的发展，浏览器事件是一个不断变化的场景，所以我想找出我们在哪里2021 年。

实际上，看起来这可能是解决方案：https://developers.google.com/web/updates/2018/07/page-lifecycle-api#the-unload-event

Google 不鼓励使用 unload 事件，因为它 (a) 在移动设备上不可靠并且 (b) 会阻止页面缓存。还建议仅在使用 beforeunload 事件之前添加它，然后将其删除，因为它也会阻止页面缓存（我注意到这对我来说并不实用，但是，因为我使用它以防止在输入大量数据后意外关闭页面，这种情况随时可能发生）。

因此，截至 2018 年 7 月，以及截至 2021 年 7 月的最佳做法，这将是检测页面卸载的推荐方法：

    const terminationEvent = 'onpagehide' in self ? 'pagehide' : 'unload';

    addEventListener(terminationEvent, function(event) {
        // handler code here ...
    }, { capture: true });

这已在一个小型 ASP NET Core 项目中使用 AJAX 回调报告页面终止进行了测试，并且似乎在 Chrome 和 Edge 中可靠地工作。只要在 IE11 中也可以使用

<meta http-equiv="x-ua-compatible" content="IE=edge">

存在。

【讨论】：