问题背景
在前端开发中，我们经常需要使用到 window.onunload 事件来处理页面关闭或刷新的相关逻辑。但是，在 Chrome 浏览器中，很多开发者会遇到这样一个问题：window.onunload 事件似乎无法正常工作。
具体表现为，当页面关闭或刷新时，预期执行的代码未被调用。而在其他浏览器中，比如 Firefox 和 Safari，该事件则可以正常监听到。
原因分析
Chrome 浏览器对 window.onunload 事件有一些特殊的处理机制，这就导致了其在某些情况下无法正常工作。
具体来说，Chrome 浏览器在页面卸载时，会先向服务器发送一个请求以检查是否有未完成的网络请求。如果存在未完成的网络请求，则会等待这些请求完成后再卸载页面。而 window.onunload 事件的执行时机是在页面即将卸载时，所以如果存在未完成的网络请求，该事件可能无法正常触发。
另外，Chrome 浏览器还会对一些特殊的操作做出特殊处理，比如通过 JavaScript 修改页面 URL。这种情况下，Chrome 会认为页面并没有真正卸载，而是进行了一次 location 的跳转操作，所以 window.onunload 事件也无法正常触发。
解决方案
针对以上原因，我们可以有如下解决方案：
方案一：使用 beforeunload 事件
和 window.onunload 类似，beforeunload 事件在页面即将卸载时会被触发。但是，和 window.onunload 不同的是，beforeunload 事件并不会等待网络请求完成后再执行，而是直接触发。因此，我们可以考虑使用 beforeunload 事件来替代 window.onunload。
window.addEventListener('beforeunload', function (event) {
// 执行相关逻辑
});需要注意的是，在使用 beforeunload 事件时，我们需要返回一个字符串作为提示语。这个字符串会被浏览器用于提示用户是否要离开当前页面。如果我们不需要提示语，则可以返回一个空字符串。
window.addEventListener('beforeunload', function (event) {
// 执行相关逻辑
event.returnValue = ''; // 不需要提示语
});方案二：使用异步请求
如果我们一定要在页面卸载时执行完某些网络请求后才能继续执行 window.onunload 事件，那么我们可以将这些网络请求改为异步请求。这样，即使在页面卸载时仍然存在未完成的网络请求，也不会影响 window.onunload 事件的正常触发。
window.addEventListener('unload', function (event) {
// 异步请求
fetch('/api/xxx', {
method: 'post',
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' }
});
});需要注意的是，在使用异步请求时，我们需要确保这些请求能够在页面卸载前完成。否则，即使在异步请求中加入了 unload 事件的监听器，也无法保证在页面卸载时所有异步请求都已完成。
方案三：避免特殊操作
如果我们的代码中存在一些特殊操作，比如通过 JavaScript 修改页面 URL，那么我们可以考虑避免这些操作，以确保 window.onunload 事件能够正常触发。
// 不要使用以下方式修改页面 URL
window.location.href = 'https://example.com';
// 改为使用以下方式
history.pushState({}, '',
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/29471) ，转载请注明来源
[https://www.javascriptcn.com/post/29471](https://www.javascriptcn.com/post/29471)