识别刷新和关闭浏览器操作 [英] Identifying Between Refresh And Close Browser Actions

问题描述

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

When we refresh the page (F5, or icon in browser), it will first trigger ONUNLOAD event. When we close the browser (X on right top icon),It will trigger ONUNLOAD event. Now when ONUNLOAD event is triggered, there is no way to distinguish between refresh the page or close the browser. If you have any solution then give me.

推荐答案

有一个解决方案.

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

I wanted to disconnect the user on the server when the tab or browser window was closed, but not when the page was reloaded (you may want to differentiate reload/close events for a different purpose but you may benefit from my solution). I ended up with the following process, based on HTML5's local storage and client/server AJAX communication:

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

1. on your page, add an onunload to the window to the following handler (pseudo-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
}

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

on your page, add a onloadon the body to the following handler (pseudo-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)
        }
    }
} 

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

on the server, collect the disconnection requests in a list and set a timer thread which inspects the list at regular intervals (I used every 20 seconds). Once a disconnection request timeout (i.e. the 5 seconds are gone), disconnect the user from the server. If a disconnection request cancelation is received in the meantime, the corresponding disconnection request is removed from the list, so that the user will not be disconnected.

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

This approach is also applicable if you want to differentiate between tab/window close event and followed links or submitted form . You just need to put the two event handlers on every page which contains links and forms and on every link/form landing page.

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

Note that I use the unload event instead of the beforeUnload event in order to manage links to attachments properly: when a user clicks on a link to an attachment (e.g. PDF file), the beforeUnload event is dispatched, then an open/save popup is raised, and nothing more (the browser does not change the displayed page and does not dispatch the unload event). If I were using the beforeUnload event (as I did before), I would have detected a page change when there is none.

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

This approach is limited to the browsers which support HTML5 local storage, so you would probably use specific approaches for old browsers such as MSIE7.

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

Other approaches based on the event.clientY are not reliable because this value is negative when clicking on the reload or tab/window close buttons, and positive when keyboard shortcuts are used to reload (e.g. F5, Ctrl-R, ...) and window closing (e.g. Alt-F4). Relying on the event X position is also not reliable because the buttons are not placed at the same position on every browser (e.g. close button at the left).

这篇关于识别刷新和关闭浏览器操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！