js监听关闭页面

在JavaScript中，监听关闭页面（如用户点击浏览器的关闭按钮或者通过快捷键关闭页面）可以通过beforeunload事件来实现。

一、基础概念

1. beforeunload事件
   • 当窗口、文档和资源正在卸载和关闭时触发。例如，当用户离开页面（刷新页面、关闭标签页或者导航到其他页面）时会触发这个事件。

二、相关代码示例

window.addEventListener('beforeunload', function (e) {
    // 标准化的方式设置提示信息（现代浏览器会忽略自定义的提示内容，只显示默认的提示）
    e.preventDefault();
    e.returnValue = '';
});

三、应用场景

1. 数据保存提示
   • 如果用户在页面上有未保存的编辑内容（如在富文本编辑器中输入了文章但未保存），可以利用这个事件弹出提示框，询问用户是否真的要离开页面，以避免数据丢失。

• 资源清理
  • 在某些情况下，可能需要在页面关闭前清理一些本地存储的资源或者停止一些正在进行的异步操作（如定时器或者Web Workers中的任务）。

四、注意事项

1. 用户体验
   • 不要滥用beforeunload事件弹出提示框。如果用户只是误操作，频繁弹出提示可能会影响用户体验。只有在确实可能存在数据丢失或者其他严重后果的情况下才使用。

• 浏览器兼容性
  • 虽然现代浏览器大多支持beforeunload事件，但在不同浏览器中的表现可能会有细微差别。例如，一些浏览器可能对自定义的提示消息有不同的处理方式（实际上大多数现代浏览器已经忽略自定义消息，只显示默认提示）。