有没有办法在beforeunload事件中检测到用户按下“留在页面”或“离开页面”的操作？

Question

有没有办法在下面的代码中检测到用户是点击了“离开页面”还是“留在页面”的按钮？

$(window).on('beforeunload', function (){
    return "You save some unsaved data, Do you want to leave?";
});

- Umer Hassan

---

不，弹出窗口会在函数返回后发生。 - Barmar

Answer 1

通过一些技巧，您至少可以确定用户是否停留在页面上。
如果用户离开了页面，您无法做太多事情：

var timeout;

$(window).on('beforeunload', function (){
    timeout = setTimeout(function() {
        // user stayed, do stuff here
    }, 1000);
    return "You save some unsaved data, Do you want to leave?";
});

FIDDLE

- adeneo

---

@VAGABOND - 当unload事件被触发（当用户离开时），确认框就会弹出询问是否离开。由于在return语句之后不能添加任何代码，因为那些代码不会被执行，所以你可以将它添加在一个timeout中，如果用户决定留下则会执行。如果用户离开了页面，所有东西都会丢失，因此timeout永远不会执行。 - adeneo

所以基本上，超时的代码在返回后执行？在你的fiddle中，我看到了一个清除超时的超时函数...这让我感到困惑...因为即使没有那个函数，代码也能正常工作。 - HIRA THAKUR

没事，那只是我显然忘记删除的东西。 - adeneo

@adeneo 如果用户决定留下，则代码正常工作。但是，如果用户点击“离开此页”按钮，则不会执行noTimeout函数。警告（“你要离开！”）没有被触发。 - Bit_hunter

@FaisalAlvi - 你的看法是错误的。本地警报将始终停止计时器，在现代浏览器中，即使离开选项卡也会停止计时器 -> https://jsfiddle.net/ek5xt59s/ - adeneo

Answer 2

据我所知，当用户决定留在页面时，卸载事件不会被触发。因此：

$(window).on('unload', function (){
    // user has left the page, do stuff here
}

- hakai

---

虽然这是真的，但在卸载事件中，您几乎没有功能，因为页面已经在卸载。因此，您将无法在此方法内完成许多事情。 - Brian

在这个时候，你不能与用户进行交互是正确的。所有的用户交互都必须在卸载之前完成（即在beforeunload事件中）。DOM 应该仍然完好无损。因此，通过异步调用，至少可以将一些数据发送到服务器。 - hakai