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

Question

我正在尝试制作一个在导航时弹出的简单加载微调器。它在导航离开时使用“beforeunload”事件显示，并在完成后使用“加载”事件再次隐藏自身。问题是，当我将页面留在手机背景中几个小时时，'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");

});

Answer 2

我已经通过 Ajax 将事件记录到数据库中。我的测试表明，触发哪些事件是不可预测的（即使用 PWA 时）。有focus、visibilitychange和resize涉及beforeunload。当使用活动 PWA 打开屏幕时，我感到很惊讶，有时beforeunload是唯一记录到数据库的事件。

我现在正在使用以下代码，这是我在Kleiderliebe找到的，它似乎可以在没有副作用的情况下工作：

var visibilityState = 'visible';

window.addEventListener('beforeunload', function(e) {

    if (visibilityState === 'visible') {

        loader.show(e);

    }

});

window.addEventListener('focus', loader.hide);

window.addEventListener('resize', loader.hide);

window.addEventListener('visibilitychange', function(e) {

    visibilityState = document.visibilityState;

    if (visibilityState === 'visible') {

        loader.hide(e);

    }

});

Answer 3

尝试通过 保存加载程序标志localStorage，因此如果页面随后重新加载，请再次检查该标志：

伪代码如下：

$(document).ready(function() {

  $('#loader').hide();

  localStorage.setItem("loader", false);

  window.addEventListener('beforeunload', showLoader);

});

var showLoader = function() {

  var isShow = localStorage.getItem("loader");

  if(!isShow){

      $('#loader').show();

      localStorage.setItem("loader", true);

  }

};