【解决方案】监听浏览器关闭事件并进行前后端交互

先上结论:需要与后端建立长连接,或者周期调用接口,当页面关闭时,链接会断开,让后端去判断页面关闭了。

项目场景:

开发过程中碰到个需求,需要在浏览器关闭的时候调用一个接口,告诉后端页面关闭了,反复尝试后记录下解决过程。


问题描述

最常用的方式是注册’beforeunload’事件,即

 window.addEventListener('beforeunload', (e) => {
  });	

但是存在以下两个问题:
1.打开后立即关闭页面,beforeunload不会触发的。

2.页面刷新后也会触发beforeunload事件,不满足需求。

原因分析:

1.第一点,原因是因为chrom最新的浏览器策略导致,新版本浏览器已修改,页面不发生任何交互事件时,此事件不触发。
2.第二点,可以通过performance.getEntriesByType(‘navigation’)[0].type === 'reload’判断页面进入类型是否为刷新来解决。

解决方案:

因为chrom的新特性,导致无法直接通过浏览器事件来判断,故需要新的解决方案。
经过与后端沟通,最后决定:

与后端建立长连接,或者周期调用接口,当页面关闭时,链接会断开,让后端去判断页面关闭了

相关推荐

  1. 【React】监听浏览器返回事件

    2024-03-10 20:58:04       33 阅读
  2. Web前后交互

    2024-03-10 20:58:04       26 阅读
  3. 前端和后交互方式

    2024-03-10 20:58:04       54 阅读
  4. ASP.NET-WebFoms常见前后交互方式

    2024-03-10 20:58:04       46 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-10 20:58:04       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-10 20:58:04       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-10 20:58:04       87 阅读
  4. Python语言-面向对象

    2024-03-10 20:58:04       96 阅读

热门阅读

  1. LLVM TableGen 系统学习笔记

    2024-03-10 20:58:04       42 阅读
  2. MySQL底层原理

    2024-03-10 20:58:04       34 阅读
  3. Android中View的绘制流程

    2024-03-10 20:58:04       43 阅读
  4. Python基础学习(8)函数进阶-闭包/装饰器

    2024-03-10 20:58:04       50 阅读
  5. or-tools cp-sat CpModel.AddAllowedAssignments

    2024-03-10 20:58:04       45 阅读
  6. Claude3系统解读与使用测评

    2024-03-10 20:58:04       41 阅读
  7. WPF 触发器

    2024-03-10 20:58:04       40 阅读
  8. 在Jupyter Notebook中安装第三方库

    2024-03-10 20:58:04       45 阅读
  9. uniapp调用原生android插件传递回调函数

    2024-03-10 20:58:04       42 阅读