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

Question

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

有可能吗？我可以处理浏览器标签关闭事件没有刷新情况？

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

我怎样才能做到这一点？

Answer 1

也许这个链接会帮助你http://eureka.ykyuen.info/2011/02/22/jquery-javascript-capture-the-browser-or-tab-closed-event/

Answer 2

$window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";
  console.log("closing the tab so do your small interval actions here like cookie removal etc but you cannot stop customer from closing");
  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

关于我们是否能以一种傻瓜式的方式来做这件事，这是一个相当有争议的问题。但从技术上讲，在这里可以做的事情不多，因为您的时间非常少，如果客户在您的行动完成之前关闭它，您就有麻烦了，您完全受客户的摆布。别忘了注入$window。我建议不要依赖它。

javascript检测浏览器关闭选项卡/关闭浏览器

更新：我正在研究这个问题并提出一些建议。除上述选项外，处理此类情况的最佳方法是创建活动超时为25-30分钟的会话。将所有需要销毁的cookie转换为超时会话。或者，您可以设置cookie到期，但cookie将保留在浏览器中，直到下次登录。少于25-30分钟的会话不活动不是完全可靠的，因为如果客户端10-15分钟不使用浏览器，您可能会注销。我甚至尝试了从链接捕获事件(

Answer 3

不幸的是，这不是一个需要解决的简单问题。但这是可以做到的。下面的答案来自许多不同的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轴不工作，因为单击“重新加载”或“选项卡/窗口关闭”按钮时Y轴为负值，使用键盘快捷键重新加载（例如F5、Ctrl-R等）和关闭窗口（例如Alt-F4）时Y轴为正值。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
        }
    }
} 

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

如果您想区分标签/窗口关闭事件和随后的链接或提交的表单，这种方法也适用。您只需要将两个事件处理程序放在包含链接和表单的每个页面以及每个链接/表单登录页面上。

结语（双关语）：

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