beforeunload事件兼容问题及页面操作时文件删除逻辑异常的技术咨询

看起来你遇到了beforeunload事件的兼容性坑，还碰到了“用户取消页面离开但文件还是被删掉”的尴尬情况——我完全理解你的需求：只要用户真的刷新、关闭或者离开页面，就把后端的对应文件删掉，不管弹不弹提示，而且要在所有系统上都能稳定工作。

先帮你拆解下当前的问题根源：

• 你最初写的window.addEventListener('beforeunload', function () { delete_file(); });在部分浏览器/构建环境下失效，是因为现在主流浏览器都对beforeunload事件做了限制：如果回调里没有修改事件的默认行为（比如调用event.preventDefault()），浏览器可能会跳过这个事件的执行，尤其是在用户没和页面有过交互的场景下，这是浏览器为了防滥用和优化性能做出的调整。
• 当你加上event.preventDefault()后，事件确实能触发了，但delete_file()会在浏览器弹出离开确认框之前就同步执行了——不管用户最后选“离开”还是“取消”，这段代码已经跑完了，这就是为什么用户取消后文件也被删掉的核心原因。

针对你的需求，我给你一套能稳定兼容所有系统的解决方案：

核心优化思路：用Beacon API保证请求可靠性 + 只在用户真正离开时触发删除逻辑 #

我们的目标是只有当用户实际执行了刷新/关闭/离开操作时，才调用删除文件的接口，同时要确保请求不会被浏览器中断，具体实现如下：

1. 先处理beforeunload事件：只触发浏览器的离开提示，确保事件能被浏览器识别（解决原始代码的兼容性问题）

window.addEventListener('beforeunload', function (event) {
  // 触发浏览器的默认离开提示，现在多数浏览器不允许自定义提示文案，所以留空即可
  event.preventDefault();
  event.returnValue = ''; // 兼容部分旧版本浏览器
});

2. 在unload事件中执行文件删除操作——unload事件只会在用户真正确认离开页面时触发（比如点了“离开此页面”、刷新、关闭标签页），用户取消的话不会执行这个事件。这里我们用Beacon API发送请求，它是浏览器专门为页面卸载场景设计的，能保证请求异步发送且不会被浏览器中断，比普通的XHR/fetch可靠得多：

window.addEventListener('unload', function () {
  // 假设你的delete_file()是调用后端的/api/delete-file接口
  // 用navigator.sendBeacon替换普通请求方式
  navigator.sendBeacon('/api/delete-file');
  
  // 如果需要传递参数（比如文件ID），可以把数据作为第二个参数传入：
  // const deleteData = JSON.stringify({ fileId: '你的文件ID' });
  // navigator.sendBeacon('/api/delete-file', deleteData);
  // 注意此时后端需要支持POST请求来接收数据
});

3. 旧浏览器兼容方案（比如IE11）：
   Beacon API不支持IE11，如果你需要兼容这类旧浏览器，可以降级为同步的XMLHttpRequest（虽然会轻微阻塞页面卸载，但能保证请求执行完成）：

window.addEventListener('unload', function () {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/delete-file', false); // 同步请求，false表示同步
  xhr.send();
});

额外注意事项 #

• 不要在beforeunload或unload事件中执行复杂的同步逻辑，尽量只做请求发送操作，避免被浏览器拦截。
• 后端接口要处理好幂等性：比如用户多次刷新页面，可能会多次发送删除请求，后端要确保文件已删除时，后续请求不会抛出错误。
• 如果你之前已经封装了delete_file()函数，可以直接修改它内部的请求实现为Beacon模式，然后在unload事件中调用修改后的delete_file()即可。

这样调整后，你就能实现：

• 所有系统的浏览器都能触发beforeunload事件的提示
• 只有当用户真正离开页面时，才会删除后端的文件
• 请求能稳定到达后端，不会被浏览器中断

内容来源于stack exchange