监听页签行为以及操作

这篇主要记录页面关闭、刷新、是否切屏等相关功能实现

监听页面页签关闭或是刷新

可以通过监听 beforeUnload 和 unload 事件来进行监听和处理

const beforeUnloadHandle = (event) => {
    event.preventDefault();
    event.returnValue = "确定是否离开页面";
};
    
const unloadHandle = () => {
    leaveHandle && leaveHandle();
};

window.addEventListener("beforeunload", beforeUnloadHandle);
window.addEventListener("unload", unloadHandle);

beforeUnloadHandle 的函数内阻止事件默认行为以及设置非空的 returnValue 会使得页面在有操作之后的页签刷新或是页签关闭会有弹窗拦截，但是该弹窗的文案不支持自定义。如果不做操作包括键鼠操作而直接F5刷新不会触发该事件。

如何区分当前页面操作是刷新还是关闭页面呢？

如果在beforeUnload中做了弹窗处理，那么无法判断出当前页面操作是刷新还是关闭。

如果只需要在unload中做处理的话，可以通过记录加载时间来区分，这里是可以区分刷新或是关闭页面操作的