首页  >  文章  >  web前端  >  如何区分浏览器刷新和窗口关闭?

如何区分浏览器刷新和窗口关闭?

Patricia Arquette
Patricia Arquette原创
2024-11-04 04:54:02708浏览

How to Distinguish Between a Browser Refresh and a Window Close?

区分刷新和关闭浏览器操作

确定刷新页面和关闭浏览器之间的区别似乎具有挑战性,因为这两个操作都会触发ONUNLOAD 事件。不过,这个难题有一个解决方案。

解决方案:

此方法利用 HTML5 本地存储和服务器客户端通信:

  1. ONUNLOAD 处理程序: 在页面上,使用伪 JavaScript 将卸载处理程序添加到窗口:

    <code class="javascript">function myUnload(event) {
        if (window.localStorage) {
            window.localStorage['myUnloadEventFlag'] = new Date().getTime();
        }
        askServerToDisconnectUserInAFewSeconds(); // Synchronous AJAX call
    }</code>

    此函数:

    • 将页面标记为正在本地存储中卸载。
    • 异步通知服务器在几秒钟内断开用户连接。
  2. ONLOAD 处理程序: 在主体上,添加一个加载处理程序:

    <code class="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) {
                // Browser reload
                askServerToCancelDisconnectionRequest(); // Asynchronous AJAX call
            } else {
                // Tab/window close
                // Perform desired actions (e.g., do nothing)
            }
        }
    }</code>

    此函数:

    • 检查自上次卸载事件以来的时间差。
    • 如果过去的时间少于 10 秒,则为浏览器重新加载。
    • 如果过去的时间超过 10 秒,则为选项卡/窗口关闭。
  3. 服务器交互:在服务器上,维护断开连接请求列表并使用计时器线程检查该列表。在超时(例如 5 秒)后处理断开连接请求,并在收到时处理取消请求。

此解决方案适用于区分选项卡/窗口关闭、重新加载操作、关注的链接和提交的表单。它适用于支持 HTML5 本地存储的浏览器。但请注意,它依赖于卸载事件,并且可能与 MSIE7 等旧版浏览器不兼容。

以上是如何区分浏览器刷新和窗口关闭?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn