先上结论:需要与后端建立长连接,或者周期调用接口,当页面关闭时,链接会断开,让后端去判断页面关闭了。
项目场景:
开发过程中碰到个需求,需要在浏览器关闭的时候调用一个接口,告诉后端页面关闭了,反复尝试后记录下解决过程。
问题描述
最常用的方式是注册’beforeunload’事件,即
window.addEventListener('beforeunload', (e) => {
});
但是存在以下两个问题:
1.打开后立即关闭页面,beforeunload不会触发的。
2.页面刷新后也会触发beforeunload事件,不满足需求。
原因分析:
1.第一点,原因是因为chrom最新的浏览器策略导致,新版本浏览器已修改,页面不发生任何交互事件时,此事件不触发。
2.第二点,可以通过performance.getEntriesByType(‘navigation’)[0].type === 'reload’判断页面进入类型是否为刷新来解决。
解决方案:
因为chrom的新特性,导致无法直接通过浏览器事件来判断,故需要新的解决方案。
经过与后端沟通,最后决定:
与后端建立长连接,或者周期调用接口,当页面关闭时,链接会断开,让后端去判断页面关闭了