如何在解决承诺之前阻止浏览器窗口在AngularJS中关闭

问题描述 投票:1回答:2

我有以下代码:

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

我希望onbeforeunload事件等待直到执行异步代码。不确定是否可以在所有支持AngularJS的浏览器中实现。

angularjs asynchronous promise onbeforeunload
2个回答
1
投票

无论您使用的是AngularJS还是任何其他框架,将窗口卸载延迟到异步操作完成之前,现代浏览器都不再支持,因为这会带来糟糕的用户体验。

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

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


0
投票

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

navigator.sendBeacon()

然后可以设置并清除标志:

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 = '';
  };
});

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

如果未兑现承诺,将提示用户确认页面的卸载。

有关更多信息,请参阅

© www.soinside.com 2019 - 2024. All rights reserved.