'beforeunload' 事件在页面留在 Android 后台时触发

Question

我正在尝试制作一个在导航时弹出的简单加载微调器。它在导航离开时使用 'beforeunload' 事件显示，并在完成后使用 'load' 事件再次隐藏自己。

问题是，当我将页面留在手机的后台例如几个小时时，“beforeunload”事件会触发并显示微调器。可能是因为 Android 上的 Chrome 正在部分卸载页面以节省内存。微调器不会自行消失，我似乎无法弄清楚如何以优雅的方式让它再次消失。

我应该使用其他任何事件吗？

    window.addEventListener("load", function() {
        topSpinner.classList.add("closed");
    });

    window.addEventListener("beforeunload", function() {
        topSpinner.classList.remove("closed");
    });

Answer 1

Chrome 68（2018 年 7 月）引入了新的页面生命周期 API：此链接中提供的状态图并未显示beforeunload将页面置于frozen状态之前的系统（浏览器）调用，但这显然是正在发生的事情。

有用的是，该 API 引入了两个新事件，它们会在页面进入和退出此状态时触发：freeze和resume.

我已经通过添加以下内容在移动 chrome 和 webview 显示上解决了这个问题：

document.addEventListener('resume', (event) => {
  // The page has been unfrozen: remove the spinner if it's active
 topSpinner.classList.add("closed");
});