如何监听下一页已开始加载的事件？答案

【问题标题】：How to listen for event that next page has started to load?如何监听下一页已开始加载的事件？
【发布时间】：2021-08-25 09:00:03
【问题描述】：

我正在尝试创建一个自定义的“加载”动画，该动画应该在下一页开始加载时开始。在实践中，我希望在浏览器开始加载下一个顶层框架时收到一个事件，无论加载事件的来源是按钮单击、链接激活还是 JavaScript 设置window.location.href。此外，我希望在加载开始时接收事件，而不是在下一页准备好切换到当前页面时接收。

我希望代码是这样的

 window.document.addEventListener("???????", function (e) { ... });

谁能指出正确的活动名称？

【问题讨论】：

这可能会有所帮助：developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…
您的设置方式一目了然。 beforeunload 会在你退出当前文档之前触发，之后window 对象和它的document 将被破坏，所以加载事件监听器必须在新的window/@987654328 中设置@。或者您使用 History API 并以编程方式获取和替换页面内容。
我不同意文档将在“beforeunload”事件“之后”被破坏。如果我添加例如服务器响应延迟 5 秒，单击链接时我会立即收到“beforeunload”，但是当服务器实际发送响应时，页面将在 5 秒延迟后切换到下一个（我测试了 Firefox 和 Google Chrome）。但是，我找不到任何实际指定这一点的规范，因此可以定义实现时间。不过，我在 Firefox 和 Chrome 中看到的带有“beforeunload”的行为是我正在寻找的行为。

标签： javascript html

【解决方案1】：

似乎window 事件beforeunload 至少为 Chrome 和 Firefox 提供了正确的时间。不过，我还没有找到任何可以保证这一点的规范。

spec says only following（强调我的）：

interface BeforeUnloadEvent : Event {
  attribute DOMString returnValue;
};
注意：没有特定于 BeforeUnloadEvent 的初始化方法。

BeforeUnloadEvent 接口是遗留接口，它允许提示卸载不仅要通过取消事件来控制，但是通过将 returnValue 属性设置为空之外的值细绳。作者应使用 preventDefault() 方法或其他方式取消事件，而不是使用 returnValue。

returnValue 属性控制提示卸载的过程。创建事件时，属性必须设置为空细绳。在获取时，它必须返回它设置的最后一个值。在设置，属性必须设置为新值。

注意：这个属性是一个 DOMString 仅出于历史原因。任何除空字符串外的值将被视为询问用户确认。

【讨论】：

this 是你的答案吗？
是的，这是解决问题的一种方法。我更喜欢查看规格并使用实际记录在案的东西。我已经知道beforeunload 似乎可以工作，但实际时间并没有在任何地方指定，所以这可能只是一个幸运的意外。从实际浏览器查询可能的事件不会让我比beforeunload更接近。