摘要：window.addEventListener('beforeunload', (event) => {// 可以在这里执行一些清理工作// 在现代浏览器中，自定义消息不再显示，但仍需要以下代码来触发确认对话框event.preventDefault;even
在浏览器中，JavaScript/TypeScript 提供了几种方法来检测用户是否离开当前页面。以下是主要的几种方法：
这是最常用的方法，当用户尝试关闭页面、刷新页面或导航到其他页面时触发。
window.addEventListener('beforeunload', (event) => {// 可以在这里执行一些清理工作// 在现代浏览器中，自定义消息不再显示，但仍需要以下代码来触发确认对话框event.preventDefault;event.returnValue = ''; // Chrome 需要设置returnValue// 注意：返回的字符串在大多数现代浏览器中不会显示给用户return '您确定要离开此页面吗？';});当页面实际上正在被卸载时触发。
window.addEventListener('unload', => {// 执行清理工作，但这里的代码执行时间有限// 不能使用同步 XMLHttpRequest 或显示对话框// 可以使用 Navigator.sendBeacon 发送最终的分析数据navigator.sendBeacon('/analytics', JSON.stringify({event: 'page_unload',timestamp: new Date.getTime}));});当用户切换标签页或最小化浏览器窗口时触发，可以检测页面是否可见。
document.addEventListener('visibilitychange', => {if (document.visibilityState === 'hidden') {// 用户离开了当前页面（切换到其他标签或最小化窗口）console.log('用户不再查看页面');} else if (document.visibilityState === 'visible') {// 用户回到了当前页面console.log('用户正在查看页面');}});类似于 unload，但在浏览器的前进/后退缓存（bfcache）激活时也会触发。
window.addEventListener('pagehide', (event) => {if (event.persisted) {// 页面被放入了 bfcacheconsole.log('页面被缓存');} else {// 页面正在被卸载console.log('页面正在卸载');}});与 pagehide 相对应，当用户通过历史记录返回页面时触发。
window.addEventListener('pageshow', (event) => {if (event.persisted) {// 页面是从 bfcache 恢复的console.log('页面从缓存恢复');} else {// 页面是新加载的console.log('页面新加载');}});来源：NativeBase一点号
免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!
