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

据我在MSDN，MozillaDev等不同的浏览器论坛中读过这个方法，这个方法没有OK / Cancel的任何回调。你有这个用于确认对话框，但不适用于此。

这是一项安全实施，允许用户完全了解他们应该看到哪个网站。此外，它还可以避免黑客将用户锁定到他们的网站。

Answer 3

但我想更多地了解他是否离开，并为他的决定做点事情

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

但是如果你想知道用户是否留下了＃34;，换句话说取消了离开过程，那么也有一种方法。它有点像hackish，但它确实有效。

＆＃13;

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;
});

＆＃13;

每次都会调用方法doSomethingWhenUserStays，但如果用户离开页面，他仍然无法看到它执行的操作。它可以执行异步，同步，它并不重要，因为它在setTimeout内，因此它超出onBeforeUnload的正常流程并且赢得了＃{1}}。干扰它。

如果您只想在用户真正停留在页面上的情况下执行此操作，那就稍微难了一点。您必须设置一个全局标志，检查用户是否已达到卸载状态，然后才调用doSomethingWhenUserStays内的内容。请考虑以下示例。

＆＃13;

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;
});

＆＃13;

捕获beforeunload确认取消了？

3 个答案: