javascript - 识别刷新和关闭浏览器操作

Question

当我们刷新页面时(F5，或者浏览器中的图标)，它会先 触发 ONUNLOAD 事件。当我们关闭浏览器时(右上角的 X 图标)，它会 触发 ONUNLOAD 事件。 现在当 ONUNLOAD 事件被触发时，无法区分是刷新页面还是关闭浏览器。 如果您有任何解决方案，请给我。

Answer 1

有一个解决方案。

我想在选项卡或浏览器窗口关闭时断开服务器上的用户连接，而不是在重新加载页面时断开连接(您可能想要区分重新加载/关闭事件以用于不同的目的，但您可能会从我的解决方案中受益) .基于 HTML5 的本地存储和客户端/服务器 AJAX 通信，我结束了以下过程:

1. 在您的页面上，将 onunload 添加到 window 到以下处理程序(伪 javascript):

   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
   }
   

2. 在您的页面上，在 body 上添加一个 onload 到以下处理程序(伪 javascript):

   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 you want (I do nothing here)
           }
       }
   } 
   

3. 在服务器上，将断开连接请求收集到一个列表中，并设置一个定时器线程定期检查该列表(我每 20 秒使用一次)。一旦断开连接请求超时(即 5 秒消失)，断开用户与服务器的连接。如果同时收到断开连接请求取消，则将相应的断开连接请求从列表中移除，这样用户就不会断开连接。

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

请注意，我使用 unload 事件而不是 beforeUnload 事件来正确管理附件链接:当用户单击附件链接时(例如PDF 文件)，beforeUnload 事件被调度，然后打开/保存弹出窗口被引发，仅此而已(浏览器不改变显示的页面并且不调度 unload 事件)。如果我使用 beforeUnload 事件(就像我以前所做的那样)，我会在没有页面更改时检测到页面更改。

此方法仅限于支持 HTML5 本地存储的浏览器，因此您可能会针对旧浏览器(例如 MSIE7)使用特定方法。

基于 event.clientY 的其他方法不可靠，因为当单击重新加载或选项卡/窗口关闭按钮时此值为负数，当使用键盘快捷键重新加载时此值为正数(例如 F5 , Ctrl-R, ...) 和窗口关闭(例如 Alt-F4)。依赖事件 X 位置也不可靠，因为按钮在每个浏览器上的位置都不相同(例如，左侧的关闭按钮)。