无法避免“onbeforeunload”事件的默认警告答案

【问题标题】：Unable to avoid default warning on 'onbeforeunload' event无法避免“onbeforeunload”事件的默认警告
【发布时间】：2019-03-12 23:22:59
【问题描述】：

我正在处理网页，需要在关闭窗口之前向服务器发送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;

谢谢。

【问题讨论】：

beforeunload 的文档警告说，并非所有浏览器都以相同的方式实现它。您使用的是哪个浏览器？您是否尝试过使用多个浏览器？
@focorner 我正在使用最新版本的 Chromium。当然，我希望 Chrome 能够正常工作，因为它是最常用的浏览器。

标签： javascript html onbeforeunload

【解决方案1】：

onbeforeunload 事件的返回值被用作告诉浏览器显示警告消息的手段（从历史上看，它可能是自定义的）。

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

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

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

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

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

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

Ps：一般不要使用async 函数作为事件回调，而且当你希望阻止它们的默认行为时。

【讨论】：

不得不让我的服务器接受 POST 请求作为假的 GET 请求，因为 sendBeacon 只发送 POST 请求，但它工作正常。

【解决方案2】：

我认为这是不可能的，因为它关乎保护我们可以让任何网站设计师让客户无法离开他的网站

【讨论】：

事实上，我不小心创建了一个错误，在该错误中我完全阻止了用户刷新、关闭或卸载页面。