如何处理Angular中的浏览器选项卡关闭事件？仅关闭，不刷新

Question

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

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

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

如何在Angular中做到这一点？

Answer 1

可悲的是，这不是一个简单的问题要解决。但这是可以完成的。以下答案是由许多不同的SO答案合并而成的。

简单的部分： 知道该窗口已被破坏。您可以使用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-
elses运行事件坐标。注意，这肯定是不可靠的。

涉及的解决方案

（摘自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
        }
    }
}

在服务器上，将断开连接请求收集到一个列表中，并设置一个计时器线程，该线程定期检查该列表（我每20秒使用一次）。断开连接请求超时（即5秒钟消失）后，将用户与服务器断开连接。如果在此期间收到断开请求取消，则将相应的断开请求从列表中删除，因此不会断开用户的连接。

如果要区分选项卡/窗口关闭事件与跟踪链接或提交表单之间的区别，此方法也适用。您只需要在每个包含链接和表单的页面以及每个链接/表单登录页面上放置两个事件处理程序。

闭幕词（双关语意）：

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