我的目标是在浏览器选项卡关闭时删除用户cookie。
可能吗?我可以在没有刷新情况下处理浏览器选项卡关闭事件吗?
如果我使用beforeunload或unload事件,则当用户刷新页面时会触发函数,我不希望这样,我只想在关闭选项卡时运行。
beforeunload
unload
如何在Angular中做到这一点?
可悲的是,这不是一个简单的问题要解决。但这是可以完成的。以下答案是由许多不同的SO答案合并而成的。
简单的部分: 知道该窗口已被破坏。您可以使用onunload事件句柄来检测到这一点。
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确定单击了什么来触发事件。
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主体添加到以下处理程序
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秒钟消失)后,将用户与服务器断开连接。如果在此期间收到断开请求取消,则将相应的断开请求从列表中删除,因此不会断开用户的连接。 如果要区分选项卡/窗口关闭事件与跟踪链接或提交表单之间的区别,此方法也适用。您只需要在每个包含链接和表单的页面以及每个链接/表单登录页面上放置两个事件处理程序。
在服务器上,将断开连接请求收集到一个列表中,并设置一个计时器线程,该线程定期检查该列表(我每20秒使用一次)。断开连接请求超时(即5秒钟消失)后,将用户与服务器断开连接。如果在此期间收到断开请求取消,则将相应的断开请求从列表中删除,因此不会断开用户的连接。
如果要区分选项卡/窗口关闭事件与跟踪链接或提交表单之间的区别,此方法也适用。您只需要在每个包含链接和表单的页面以及每个链接/表单登录页面上放置两个事件处理程序。
闭幕词(双关语意):
由于您要在关闭窗口时删除cookie,因此我假设这是为了防止它们在以后的会话中使用。如果这是正确的假设,则上述方法将很好地工作。您将无效的cookie保留在服务器上(一旦客户端断开连接),当客户端创建新会话时,JS将默认发送cookie,此时您知道它来自较旧的会话,将其删除并有选择地提供一个在客户端上设置一个新的。