小编典典

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

angularjs

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

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

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

如何在Angular中做到这一点?


阅读 1113

收藏
2020-07-04

共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.clientYevent.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,此时您知道它来自较旧的会话,将其删除并有选择地提供一个在客户端上设置一个新的。

2020-07-04