捕获 beforeunload 确认已取消？

Question

我想在用户离开页面时做一些事情，我添加此代码

window.onbeforunload = function (e){
   return "You save some unsaved data, Do you want to leave?";
}  

此提示可以通知用户，用户可以留在页面上或离开。但我想更多地了解他是否离开，并根据他的决定采取行动。我尝试过这个，

window.onbeforunload = function (e){
   var event = jQuery.Event(e);
   var result = confirm('want to leave?');
   if (result ==  false){
     //do sth.. 
     event.preventDefault();
   }else{
    //do clean up
   }
} 

但失败了！它总是会消失！

任何人都可以帮助我做到这一点吗？

Answer 1

您使用的方法（防止事件冒泡）是故意不可能的，否则您可能会阻止用户离开您的页面。

您可以通过执行清理 onunload 来实现与您想要的类似的效果，并执行您一直想做的 onbeforeunload 操作。

Answer 2

但我想更多地了解他是否离开，并根据他的决定采取行动

如果你想在他离开时做某事，你可以在 unload 事件中做。例如，正如 @Erik Bakker 提到的，您可以在 unload 事件中发送异步事件。

但是，如果您想知道用户是否“留下”，换句话说，取消了离开过程，也有一种方法。这有点黑客，但它确实有效。

const doSomethingWhenUserStays = function doSomethingWhenUserStays() {
  alert('user stayed!!!');
}


window.addEventListener('beforeunload', function onBeforeUnload(e) {
  setTimeout(doSomethingWhenUserStays, 500);
  
  // Dialog text doesn't really work in Chrome.
  const dialogText = 'A dialog text when leaving the page';
  e.returnValue = dialogText;
  return dialogText;
});

方法doSomethingWhenUserStays每次都会被调用，但是如果用户离开页面，他无论如何也看不到它执行了什么。它可以执行异步的东西，同步的，这并不重要，因为它在 setTimeout 内，因此它不属于 onBeforeUnload 的正常流程，并且不会干扰它。

如果您只想在用户确实停留在页面上时执行它，那就有点困难了。您必须设置一个全局标志来检查用户是否达到卸载状态，然后才调用 doSomethingWhenUserStays 中的内容。考虑以下示例。

let hasUserLeft = false;

const doSomethingWhenUserStays = function doSomethingWhenUserStays() {
  // Perform the following only if user hasn't left the page
  if (!hasUserLeft) {
    alert('user stayed!!!');
  }
}


window.addEventListener('beforeunload', function onBeforeUnload(e) {
  // It won't perform doSomethingWhenUserStays in 500ms right after this is called,
  // but instead, it will perform it in 500ms after you click "Stay" or "Leave".
  // Therefore, there should be some time for `unload` handler to fire and
  // set `hasUserLeft` flag before `doSomethingWhenUserStays` is called.
  setTimeout(doSomethingWhenUserStays, 500);
  
  // Dialog text doesn't really work in Chrome.
  const dialogText = 'A dialog text when leaving the page';
  e.returnValue = dialogText;
  return dialogText;
});


window.addEventListener('unload', function onUnload() {
  hasUserLeft = true;
});

Answer 3

据我在 MSDN、MozillaDev 等不同浏览器论坛中读到的有关此方法的信息，此方法没有任何 OK/Cancel 回调。您可以将其用于确认对话框，但不能用于此。

这是一种安全实施，允许用户完全有权决定他们应该查看哪个网站。此外，它还可以防止黑客将用户锁定到他们的网站。