javascript - 检测 beforeunload 事件是否被不相关的函数取消

Question

我有一个简单的函数，可以在发出新页面请求时显示旋转器叠加层。

$(window).on("beforeunload", function() {
  $('#nav-spinner').show();
});

这工作得很好..但是，它用在复杂的 WordPress 网站上，并且还有其他(第三方)组件有时也使用此事件取消导航(例如，从部分填充的导航离开时进行确认)形式)。

有什么方法可以确定另一个函数是否取消了页面卸载，以便我可以在覆盖层保留在页面上时立即删除它们。

我想在取消实际导航时执行此操作 - 使用计时器删除叠加层将导致叠加层过早隐藏或保留时间超过应有的时间。

Answer 1

显示问题的测试用例

因此以下代码显示了您当前拥有的内容。我将背景设置为红色，因为它是最少量的代码。

window.addEventListener("beforeunload", function(event) {
  document.body.classList.add("red");
});

// 3rd party code that is showing the "are you sure"
window.addEventListener("beforeunload", function(event) {
  event.preventDefault();
  event.returnValue = 'I am 3rd party code';
});

.red {
  background-color: red;
}

<form>
  <button>Click Me then click "Cancel"</button>
</form>

解决问题

现在我们有了错误的测试用例。当用户单击“取消”时，背景不应保持红色。那么我们怎样才能检测到呢？嗯，没有任何事件可以告诉您用户做了什么。

因此，您唯一能做的就是添加一个计时器，以在用户取消时删除您添加的内容。因此，如果他们单击“取消”，计时器就会运行并将其删除。

但是如果他们不取消的话我们如何保留它呢？我们使用 unload 来终止隐藏它的超时。因此删除超时，它就不会触发。

var timer
// update the page as page exits
window.addEventListener("beforeunload", function(event) {
  document.body.classList.add("red");
  // if this timer runs, it means beforeunload was cancelled 
  timer = window.setTimeout( function () {
    document.body.classList.remove("red");
  }, 50);
});
   // remove the timer when the pages finally exits so the class is not removed.
window.addEventListener("unload", function(event) {
  window.clearTimeout(timer)
})


 // 3rd party code that is showing the "are you sure"
window.addEventListener("beforeunload", function(event) {
  event.preventDefault();
  event.returnValue = 'I am 3rd party code';
});

.red {
  background-color: red;
}

<form>
  <button>Click Me then click "Cancel"</button>
</form>

您可能需要调整超时毫秒值。通过过渡可以减少显示内容的闪烁，但希望浏览器不会终止该卸载。