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

编程问答 2022-04-22

问题描述

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

  1. 浏览器标签关闭
  2. 浏览器刷新
  3. 浏览器导航到超链接
  4. 浏览器导航前进/后退

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

根据许多来源，window.onunload 事件应该在上述所有场景中触发（如果它是，我可以使用它），但在 Windows 上的 Chrome 下测试is only triggering this event in scenario 1 (when the tab is closed).它适用于此。

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

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

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

解决方法

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

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

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

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

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

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

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

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

存在。

htmljavascriptonunloadpage-refresh