javascript - 无法避免 'onbeforeunload' 事件的默认警告

Question

我正在处理网页，需要在关闭窗口之前向服务器发出 disconnect 请求，因此我使用 onbeforeunload 事件来执行此操作。但是，无论我如何尝试，我似乎都无法避免使用 onbeforeunload 时出现的默认“保存更改”对话框。

我错过了什么吗？为什么对话框仍然出现？

async function close(event){
  // Prevent default warning
  event.preventDefault();
  event.returnValue = null;
  
  // Here goes my stuff. There's an await here.
  
  // More preventing
  return null;
}

// The event is set later
window.onbeforeunload = close;

谢谢。

Answer 1

onbeforeunload 事件的返回值用于告诉浏览器显示警告消息(历史上，它可能是自定义消息)。

您的async函数返回一个Promise，因此浏览器认为它应该显示此警告消息(您可能会在浏览器中看到消息[object Promise]仍然接受自定义消息)。

async function foo() {
  return "hello";
}

console.log(foo().toString()); // [object Promise]

为避免这种情况，请勿在此处使用 async 函数。当您的异步任务结束时，页面很有可能已经关闭。

另请注意，您无法阻止 onbeforeunload 事件。只有用户可以(通过前面提到的警告信息提示)。

最后，如果您希望在此事件中发送数据，请使用 navigator.sendBeacon()方法，即使在页面关闭后它也应该能够工作。

Ps:通常不要使用 async 函数作为事件回调，而且当您希望阻止它们的默认行为时。