您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

可悲的是,这不是一个简单的问题要解决。但这是可以完成的。以下答案是由许多不同的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,此时您知道它来自较旧的会话,将其删除并有选择地提供一个在客户端上设置一个新的。

其他 2022/1/1 18:15:48 有391人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶