记录用户是否在 Javascript 'beforeunload' 事件上单击了 'cancel'

Question

我正在尝试在用户关闭浏览器选项卡时执行一些操作。下面是我的代码。

function myfun(){
  console.log('action performed')
}

window.onbeforeunload = function(e){
  e.preventDefault()
  myfun()
  return 'Are you sure you want to leave?';
};

我的代码有效，但我面临的问题是，如果用户点击取消按钮没有关闭选项卡，我的功能仍然运行。有没有办法记录用户点击了取消按钮？

我试过如下修改 'myfun' 函数，但没有帮助。

function myfun(){
  if(window.close()){
    console.log('action perfomed')
  }
}

Answer 1

我认为无法检查用户是否按下了取消按钮。以其他方式，您可以按照以下代码使用 onunload 事件。

window.onunload = function(e) {
      console.log("unload event");
    };

如果用户点击重新加载，那么这将被调用。

Answer 2

您可以使用卸载事件。由于大多数浏览器会在页面卸载后删除页面日志，因此我将其替换为 localStorage 示例。

function myfun(){
  localStorage.setItem('myCat', 'Tom');
}

window.onbeforeunload = function(e){
  e.preventDefault()
  return 'Are you sure you want to leave?';
};

window.onunload = myfun;
if(localStorage.getItem("myCat")!=null)
  alert("Last time this page was closed the unload event was called!");
localStorage.setItem('myCat', null);

Unload 事件不会总是被触发，因为 Mozilla states :

Especially on mobile, the unload event is not reliably fired. For example, the unload event is not fired at all in the following scenario:

A mobile user visits your page.

The user then switches to a different app.

Later, the user closes the browser from the app manager.

最好使用 visibilitychange event or pagehide 事件，即使它们不能完全替代卸载事件。

Also, the unload event is not compatible with the back/forward cache (bfcache), because many pages using this event assume that the page will not continue to exist after the event is fired. To combat this, some browsers (such as Firefox) will not place pages in the bfcache if they have unload listeners, and this is bad for performance. Others, such as Chrome, will not fire the unload when a user navigates away.

The best event to use to signal the end of a user's session is the visibilitychange event. In browsers that don't support visibilitychange the next-best alternative is the pagehide event, which is also not fired reliably, but which is bfcache-compatible.

If you're specifically trying to detect page unload events, it's best to listen for the pagehide event.

记录用户是否在 Javascript 'beforeunload' 事件上单击了 'cancel'

Record if the user clicked 'cancel' on Javascript 'beforeunload' event

javascript

dom

onbeforeunload

event-handling