如何防止浏览器 window 在 AngularJS 中关闭，直到承诺得到解决

Question

我有以下代码：

$window.onbeforeunload = function (event) {
    event.preventDefault();
    // some asynchronous code 
};

我想让onbeforeunload事件等到异步代码执行完毕。不确定这是否可以在所有支持 AngularJS.

的浏览器中实现

Answer 1

无论您使用的是 AngularJS 还是任何其他框架，现代浏览器都不再支持延迟 window 卸载直到异步操作完成，因为这会造成糟糕的用户体验.

但是，假设您要执行的异步操作是发出 API 请求，那么现代解决方案是改用 navigator.sendBeacon() 方法。它保证由浏览器以非阻塞方式发送，即使 window 已被卸载。这对每个人来说都是一个更好的解决方案。

请注意，信标请求必须作为 POST 请求发送，因此您的 API 需要为您希望在卸载处理程序中使用的任何端点支持此方法。

Answer 2

可以创建一个查看微调器标志的处理程序：

var spinnerFlag = false;

$window.addEventListener('beforeunload',unloadHandler);
$scope.$on("$destroy", function() {
    $window.removeEventListener('beforeunload',unloadHandler);
});

function unLoadHandler(e) {
  if (spinnerFlag) {
    // Cancel the event
    e.preventDefault();
    // Chrome requires returnValue to be set
    e.returnValue = '';
  };
});

然后可以设置和清除标志：

spinnerFlag = true;
var promise = promiseBasedAPI(arguments).finally(function() {spinnerFlag = false;});

这将在开始异步操作之前设置标志，并在承诺成功或拒绝时清除标志。

如果承诺未解决，将提示用户确认页面卸载。

有关详细信息，请参阅

MDN Web API Reference - onbeforeunload
Prevent a webpage from navigating away using JavaScript — this answer
How to show the "Are you sure you want to navigate away from this page?" when changes committed?

如何防止浏览器 window 在 AngularJS 中关闭，直到承诺得到解决

How to prevent browser window from closing in AngularJS until the promise is resolved

asynchronous

onbeforeunload

promise

angularjs