javascript - 如何在 Angular 中处理浏览器选项卡关闭事件？只关闭，不刷新

Question

我的目标是在浏览器选项卡关闭时删除用户 cookie。

这可能吗？我可以在不刷新的情况下处理浏览器选项卡关闭事件吗？

如果我使用 beforeunload 或 unload 事件，当用户刷新页面时触发函数，我不想要这个，我只想在关闭选项卡时运行。

如何在 Angular 中执行此操作？

Answer 1

不幸的是，这不是一个容易解决的问题。但这是可以完成的。下面的答案是由许多不同的 SO 答案合并而成的。

简单部分:知道 window 正在被破坏。您可以使用 onunload 事件句柄来检测这一点。

棘手部分:

检测是否是刷新、链接跟踪或所需的窗口关闭事件。删除链接和表单提交非常简单:

var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });

$(window).bind('beforeunload', function(eventObject) {
    var returnValue = undefined;
    if (! inFormOrLink) {
        returnValue = "Do you really want to close?";
    }
    eventObject.returnValue = returnValue;
    return returnValue;
}); 

穷人的解决方案

检查 event.clientY 或 event.clientX 以确定单击了什么来触发事件。

function doUnload(){
 if (window.event.clientX < 0 && window.event.clientY < 0){
   alert("Window closed");
 }
 else{
   alert("Window refreshed");
 }
}

Y 轴不起作用，因为它对于点击重新加载或选项卡/窗口关闭按钮为负值，而当使用键盘快捷键重新加载(例如 F5、Ctrl-R 等)和窗口关闭(例如Alt-F4)。 X 轴没有用，因为不同的浏览器有不同的按钮位置。但是，如果您的能力有限，那么通过一系列 if-else 运行事件坐标可能是您的最佳选择。请注意，这肯定不可靠。

涉及解决方案

(摘自 Julien Kronegg )使用 HTML5 的本地存储和客户端/服务器 AJAX 通信。注意:此方法仅限于支持 HTML5 本地存储的浏览器。

在您的页面上，将 onunload 添加到窗口的以下处理程序

function myUnload(event) {
    if (window.localStorage) {
        // flag the page as being unloading
        window.localStorage['myUnloadEventFlag']=new Date().getTime();
    }

    // notify the server that we want to disconnect the user in a few seconds (I used 5 seconds)
    askServerToDisconnectUserInAFewSeconds(); // synchronous AJAX call
}

然后将onloadon主体添加到以下处理程序

function myLoad(event) {
    if (window.localStorage) {
        var t0 = Number(window.localStorage['myUnloadEventFlag']);
        if (isNaN(t0)) t0=0;
        var t1=new Date().getTime();
        var duration=t1-t0;
        if (duration<10*1000) {
            // less than 10 seconds since the previous Unload event => it's a browser reload (so cancel the disconnection request)
            askServerToCancelDisconnectionRequest(); // asynchronous AJAX call
        } else {
            // last unload event was for a tab/window close => do whatever
        }
    }
} 

On the server, collect the disconnection requests in a list and set a timer thread which inspects the list at regular intervals (I used every 20 seconds). Once a disconnection request timeout (i.e. the 5 seconds are gone), disconnect the user from the server. If a disconnection request cancelation is received in the meantime, the corresponding disconnection request is removed from the list, so that the user will not be disconnected.

This approach is also applicable if you want to differentiate between tab/window close event and followed links or submitted form. You just need to put the two event handlers on every page which contains links and forms and on every link/form landing page.

结束语(双关语):

由于您想在窗口关闭时删除 cookie，我假设这是为了防止它们在将来的 session 中使用。如果这是一个正确的假设，那么上述方法将会很好地发挥作用。您将失效的cookie保留在服务器上(一旦客户端断开连接)，当客户端创建新 session 时，JS将默认发送cookie，此时您知道它来自较旧的 session ，将其删除并可选择提供一个将在客户端上设置新的一个。