检测用户何时离开网页的最佳方法?

试试 onbeforeunload 事件:在卸载页之前激发。它还允许您询问用户是否真的想离开。看演示 onbeforeunload Demo .

或者,您可以发送一个 Ajax 他离开时请求。

Mozilla Developer Network有一个很好的描述和示例 onbeforeunload .

如果您想在离开页面之前警告用户页面是否脏(即如果用户输入了一些数据):

window.addEventListener('beforeunload', function(e) {
  var myPageIsDirty = ...; //you implement this logic...
  if(myPageIsDirty) {
    //following two lines will cause the browser to ask the user if they
    //want to leave. The text of this dialog is controlled by the browser.
    e.preventDefault(); //per the standard
    e.returnValue = ''; //required for Chrome
  }
  //else: user is allowed to leave without a warning dialog
});

为此,我使用:

window.onbeforeunload = function (e) {

}

它将在卸载页之前激发。

一种(稍微有点骇人)的方法是用Ajax调用服务器端来替换和链接从您的站点引出,表明用户要离开,然后使用相同的javascript块将用户带到他们请求的外部站点。

当然,如果用户只是关闭浏览器窗口或在新的URL中键入内容,这将不起作用。

为了解决这个问题,您可能需要在页面上使用javascript的setTimeout(),每隔几秒钟调用一次Ajax(取决于您想知道用户是否离开的速度)。

我知道这个问题已经被回答了,但是如果您只想在实际浏览器关闭时触发一些东西,而不仅仅是在页面加载发生时,您可以使用以下代码:

window.onbeforeunload = function (e) {
        if ((window.event.clientY < 0)) {
            //window.localStorage.clear();
            //alert("Y coords: " + window.event.clientY)
        }
};

在我的示例中,我正在清除本地存储,并使用鼠标Y坐标向用户发出警报,只有当浏览器关闭时,从程序中加载的所有页面上都会忽略这一点。

这是另一种解决方案-因为在大多数浏览器中导航控件(导航栏、选项卡等)都位于 在上面 页面内容区域,您可以通过顶部检测鼠标指针离开页面并显示一个“ 在你离开之前 “对话”。完全不引人注目 和 它允许您与用户交互 之前 他们实际上执行了离开的动作。

$(document).bind("mouseleave", function(e) {
    if (e.pageY - $(window).scrollTop() <= 1) {    
        $('#BeforeYouLeaveDiv').show();
    }
});

缺点是它当然是 猜测 用户实际上打算离开,但在大多数情况下,这是正确的。